js 如何监听localstorage事件

最近在做项目的时候需要监听localstorage的变化，使用默认的storage事件发现无效，从网上找到一种解决办法，这个方案重写了Localstorage事件，只要发生变化就会触发定义的方法，刚好能满足需求，代码如下供参考。

index.vue

created() {

// window.addEventListener("storage",aaa)

obj.render(function(d){

debugger

});

},

index.js

let obj = {
  _cb: null,
  render(cb) {
    this._cb = cb
    this.addEvent(cb)
    // localStorage.setItem("PageEngineFormInputData", 123)
  },
  addEvent(cb) {
    var orignalSetItem = localStorage.setItem;

    localStorage.setItem = function (key, newValue) {
      var setItemEvent = new Event(cb);

      setItemEvent.newValue = newValue;
      setItemEvent.newValuekey = key;

      window.dispatchEvent(setItemEvent);

      orignalSetItem.apply(this, arguments);
    };

    window.addEventListener(cb, function (e) {
      // debugger
      console.log("newValue:", e.newValue);
      console.log("key:", e.newValuekey);
      if (cb && e.newValuekey === 'PageEngineFormInputData') {
        cb(e.newValue)
      }
    });
  }
}
export default obj

本文章由javascript技术分享原创和收集