<div style="display: none;" hidden="true" aria-hidden="true" data-nosnippet>Are you an LLM? You can read better optimized documentation at /pages/d36e75.md for this page in Markdown format</div>

重写localStorage

var orignalSetItem = localStorage.setItem;
localStorage.setItem = function(key,newValue){
      var setItemEvent = new Event("setItemEvent");
      setItemEvent.newValue = newValue;
      window.dispatchEvent(setItemEvent);
      orignalSetItem.apply(this,arguments);
}
window.addEventListener("setItemEvent", function (e) {
    alert(e.newValue);
});
localStorage.setItem("name","wang");

全局变量代理

做一个全局变量代理，在页面初始化的时候读取localStorage中的内容

这里全局变量举例 window._theme

• 读

  const getTheme = () => {
    return window._theme || window.localStorage.getItem('theme') || 'default'
  }

• 写

  const setTheme = (value) => {
    window.localStorage.setItem('theme': value)
    return window._theme = value
  }

举例

在vuex vue store中持久存取应用主题theme:dark这个属性值

state: {
    theme: window.localStorage.getItem('theme') || 'default'
},
mutations: {
  SET_THEME: (state, value) => {
    state.theme = value
    window.localStorage.setItem('theme', value)
  }
}