监听localStorage中的数据变化

时间:2024-07-25 18:03:56

问题描述:我们在js里面获取了某一个localstorage的值,但是后期它可能改变了,我们js只执行一遍没办法再次获取它的值,当然可以刷新页面获取,但如果是我们的但页面就不能刷新页面了,此时:
我们可以重写localStorage的setItem方法,当调用setItem方法设置新值的时候,会new Event('setItemEvent')
但是只是实例化事件了,怎么去监听呢?
我们可以用window.dispatchEvent()这个方法来派发一个事件,让window去监听。新实例出来的这个事件会被绑定到window上来监听它的调用,当调用的时候可以拿到setItem的新值,直接赋值就可以
具体实现
先在src下新建utils文件夹,新建tools.js,它会抛出一个dispatchEventStroage方法
// 重写setItem事件,当使用setItem的时候,触发,window.dispatchEvent派发事件
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)
}
}
在main.js里面全局引入,并use,然后调用该dispatchEventStroage方法,以解决setitemEvent不会立即生效的问题
import Tools from '@/utils/tools'
Vue.use(Tools)
// 为了解决setItemEvent不立即生效,使用事件派发强制更高
Tools.dispatchEventStroage()

然后就可以使用了
如果我们在每次发送请求的时候都需要携带token字段,token有时候可以存在localstorage里面,但是当token发生改变时,我们js不知道已经改变,所以就需要用到以上方法了。
const reqHeaders = {
Accept: 'text/json',
// 第一次登录之后返回的token,之后每次请求都携带token字段进行验证
token: localStorage.getItem('token') || ''
}
// window全局监听localStorage的setItem事件以及时更新
window.addEventListener('setItemEvent', function (e) {
reqHeaders.token = e.newValue
})

自定义事件的触发dispatchEvent

一、element.dispatchEvent()

对于标准浏览器,其提供了可供元素触发自定义事件的方法:element.dispatchEvent().。
不过,在使用该方法之前,我们还需要做其他两件事,即创建和初始化。

document.createEvent()
event.initEvent()
element.dispatchEvent()
举个例子: var dom = document.querySelector('#id')
document.addEventListener('alert', function (event) {
console.log(event)
}, false); // 创建
var evt = document.createEvent("HTMLEvents");
// 初始化
evt.initEvent("alert", false, false); // 触发, 即弹出文字
dom.dispatchEvent(evt);
1、createEvent()

createEvent()方法返回新创建的Event对象,支持一个参数,表示事件类型,具体见下表:

参数 事件接口 初始化方法
HTMLEvents HTMLEvent initEvent()
MouseEvents MouseEvent initMouseEvent()
UIEvents UIEvent initUIEvent()
2、initEvent()

initEvent()方法用于初始化通过DocumentEvent接口创建的Event的值。

支持三个参数:initEvent(eventName, canBubble, preventDefault)
分别表示:

  • 事件名称
  • 是否可以冒泡
  • 是否阻止事件的默认操作
3、dispatchEvent()

dispatchEvent()就是触发执行了,dom.dispatchEvent(eventObject)
参数eventObject表示事件对象,是createEvent()方法返回的创建的Event对象。

二、自定义事件

1、Event

自定义事件的函数有 EventCustomEventdispatchEvent

// 向 window派发一个resize内置事件
window.dispatchEvent(new Event('resize')) // 直接自定义事件,使用 Event 构造函数:
var event = new Event('build');
var elem = document.querySelector('#id')
// 监听事件
elem.addEventListener('build', function (e) { ... }, false);
// 触发事件.
elem.dispatchEvent(event);
2、CustomEvent

CustomEvent 可以创建一个更高度自定义事件,还可以附带一些数据,具体用法如下:

var myEvent = new CustomEvent(eventname, options);
其中 options 可以是:
{
detail: {
...
},
bubbles: true, //是否冒泡
cancelable: false //是否取消默认事件
}

其中 detail 可以存放一些初始化的信息,可以在触发的时候调用。其他属性就是定义该事件是否具有冒泡等等功能。

内置的事件会由浏览器根据某些操作进行触发,自定义的事件就需要人工触发。
dispatchEvent 函数就是用来触发某个事件:

element.dispatchEvent(customEvent);

上面代码表示,在 element 上面触发 customEvent 这个事件。
结合起来用就是:

// add an appropriate event listener
obj.addEventListener("cat", function(e) { process(e.detail) }); // create and dispatch the event
var event = new CustomEvent("cat", {"detail":{"hazcheeseburger":true}});
obj.dispatchEvent(event);
使用自定义事件需要注意兼容性问题,而使用 jQuery 就简单多了: // 绑定自定义事件
$(element).on('myCustomEvent', function(){}); // 触发事件
$(element).trigger('myCustomEvent');
// 此外,你还可以在触发自定义事件时传递更多参数信息: $( "p" ).on( "myCustomEvent", function( event, myName ) {
$( this ).text( myName + ", hi there!" );
});
$( "button" ).click(function () {
$( "p" ).trigger( "myCustomEvent", [ "John" ] );
});

3、IE浏览器

由于向下很多版本的浏览器都不支持document.createEvent()方法,因此我们需要另辟蹊径(据说IE有document.createEventObject()和event.fireEvent()方法,但是不支持自定义事件~~)。
IE浏览器有不少自给自足的东西,例如下面要说的这个"propertychange"事件,顾名思意,就是属性改变即触发的事件。
例如文本框value值改变,或是元素id改变,或是绑定的事件改变等等。

dom.evtAlert = "2012-04-01";
<br>dom.attachEvent("onpropertychange", function(e) {
if (e.propertyName == "evtAlert") {
fn.call(this);
}
});

这个,当我们需要触发自定义事件的时候,只要修改DOM上自定义的evtAlert属性的值即可:

dom.evtAlert = Math.random().toString(36).substr(2)

此时就会触发dom上绑定的onpropertychange事件,又因为修改的属性名正好是"evtAlert", 于是自定义的fn就会被执行。这就是IE浏览器下事件触发实现的完整机制,应该说讲得还是蛮细的。

三、自定义事件的删除

与触发事件不同,事件删除,各个浏览器都提供了对应的事件删除方法,如removeEventListenerdetachEvent
不过呢,对于IE浏览器,还要多删除一个事件,就是为了实现触发功能额外增加的onpropertychange事件:

dom.detachEvent("onpropertychange", evt);

var fireEvent = function(element,event){
if (document.createEventObject){
// IE浏览器支持fireEvent方法
var evt = document.createEventObject();
return element.fireEvent('on'+event,evt)
}
else{
// 其他标准浏览器使用dispatchEvent方法
var evt = document.createEvent( 'HTMLEvents' );
evt.initEvent(event, true, true);
return !element.dispatchEvent(evt);
}
};