前言: 由于在平时开发中,经常或不经常的用到一些功能或插件或函数,回头找起来还挺麻烦,我的想法是我直接将他们全部的封装成一个个的组件,做到“”拿来即用&ldq
由于在平时开发中,经常或不经常的用到一些功能或插件或函数,回头找起来还挺麻烦,我的想法是我直接将他们全部的封装成一个个的组件,做到“”拿来即用“”且该组件必须经过测试确实可用才行,于是我新创建了一个Vue项目,基于"vue": "^2.6.14",用它来测试组件是否正常,因为我vue2/3 ,React hooks 之类的都在用,这里就以vue2作为基础了,后续我的想法是多做几个版本。
这个是我封装的函数,作用是监听本地存储localStorage的变化,当设置localStorage时可以监听它的变化并将值保存到变量中,实现响应式。
这个函数最核心之处其实是javascript的一个方法dispatchEvent,意思是派发事件,主动的给DOM事件,具体的使用方法可以查看红宝书,我记得他的参数有16个,可以好好看看这个,我之前拿它做无头浏览器来着。
找一个.js文件放入以下代码
function dispatchEventStroage() {
const signSetItem = localStorage.setItem
localStorage.setItem = function(key, val) {
let setEvent = new Event('setItemEvent')
setEvent.key = key
setEvent.newValue = val
window.dispatchEvent(setEvent)
signSetItem.apply(this, arguments)
}
}
export default dispatchEventStroage;
完整的使用方法示例
<template>
<div>
<h2>测试页面</h2>
<h4>{{value}}</h4>
</div>
</template>
<script>
import dispatchEventStroage from '@/utils/tools'
export default {
data () {
return {
value:"000",
num:1
}
},
mounted () {
let _this = this
dispatchEventStroage("title")
window.addEventListener("setItemEvent", function (e) {
if (e.key === "title") {
console.log(e.newValue)
_this.value = e.newValue
}
})
setInterval(()=>{
this.num += 1
localStorage.setItem("title",this.num);
},1000)
}
}
</script>
<style>
</style>
到此这篇关于监听localStorage的变化的文章就介绍到这了,更多相关监听localStorage的变化内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!
--结束END--
本文标题: JS组件封装之监听localStorage的变化
本文链接: https://www.lsjlt.com/news/167096.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0