js监听localStorage
接着奏乐接着舞。 人气:0前言:
由于在平时开发中,经常或不经常的用到一些功能或插件或函数,回头找起来还挺麻烦,我的想法是我直接将他们全部的封装成一个个的组件,做到“”拿来即用“”且该组件必须经过测试确实可用才行,于是我新创建了一个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>
加载全部内容