监控localStorage变化

[Kaviilee]

今天遇到一个需要监控localStorage变化的需求。

查了 MDN 发现有自带的

storage 事件，通过 window.addEventListener 来监听变化，但是发现并不能满足我的需求(我甚至没法触发该函数

window.addEventListener('storage', function(e) {
  // doing something
})

// or
window.onstorage = () => {
  // doing something
}

所以另辟蹊径，决定重写 setItem 事件，通过 window.dispatchEvent 来派发事件

function dispatchEventStorage() {
  const _setItem = localStorage.setItem

  localStorage.setItem = function(key, val) {
    // 注册一个名称为 setItemEvent 的事件
    let setEvent = new Event('setItemEvent')
    // key 为改变的 key， newVal 为改变的 value
    setEvent.key = key
    setEvent.newVal = val

    window.dispatchEvent(setEvent)

    _setItem.apply(this, arguments)
  }
}

因为我是在 vue 内监听 localStorage 变化，所以调用的时候要先在 main.js 里面调用

// main.js
Vue.use(dispatchEventStorage)

// dispatchEventStorage()

在实际使用的时候

window.addEventListener('setItemEvent', function(e) {
  // doing something
})