监听localStorage中的数据变化

问题描述：我们在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.setItemlocalStorage.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\

// 触发, 即弹出⽂字

dom.dispatchEvent(evt);1、createEvent()

createEvent()⽅法返回新创建的Event对象，⽀持⼀个参数，表⽰事件类型，具体见下表：

参数事件接⼝初始化⽅法

HTMLEventsHTMLEventinitEvent()MouseEventsMouseEventinitMouseEvent()UIEvents

2、initEvent()

initEvent()⽅法⽤于初始化通过DocumentEvent接⼝创建的Event的值。

UIEventinitUIEvent()

⽀持三个参数：initEvent(eventName, canBubble, preventDefault)分别表⽰：

事件名称是否可以冒泡

是否阻⽌事件的默认操作

3、dispatchEvent()

dispatchEvent()就是触发执⾏了，dom.dispatchEvent(eventObject)

参数eventObject表⽰事件对象，是createEvent()⽅法返回的创建的Event对象。

⼆、⾃定义事件

1、Event

⾃定义事件的函数有 Event、CustomEvent 和 dispatchEvent

// 向 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\

// create and dispatch the event

var event = new CustomEvent(\"cat\obj.dispatchEvent(event);

使⽤⾃定义事件需要注意兼容性问题，⽽使⽤ jQuery 就简单多了：// 绑定⾃定义事件

$(element).on('myCustomEvent', function(){});

// 触发事件

$(element).trigger('myCustomEvent');

// 此外，你还可以在触发⾃定义事件时传递更多参数信息：

$( \"p\" ).on( \"myCustomEvent\ $( this ).text( myName + \});

$( \"button\" ).click(function () {

$( \"p\" ).trigger( \"myCustomEvent\});

3、IE浏览器

由于向下很多版本的浏览器都不⽀持document.createEvent()⽅法，因此我们需要另辟蹊径（据说IE有document.createEventObject()和event.fireEvent()⽅法，但是不⽀持⾃定义事件~~）。

IE浏览器有不少⾃给⾃⾜的东西，例如下⾯要说的这个\"propertychange\"事件，顾名思意，就是属性改变即触发的事件。例如⽂本框value值改变，或是元素id改变，或是绑定的事件改变等等。

dom.evtAlert = \"2012-04-01\";

dom.attachEvent(\"onpropertychange\ if (e.propertyName == \"evtAlert\") { fn.call(this); }});

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

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

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

三、⾃定义事件的删除

与触发事件不同，事件删除，各个浏览器都提供了对应的事件删除⽅法，如removeEventListener和detachEvent。不过呢，对于IE浏览器，还要多删除⼀个事件，就是为了实现触发功能额外增加的onpropertychange事件：

dom.detachEvent(\"onpropertychange\

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); } };