监听localStorage中的值更新

Vue中localStorage监听技巧

最新推荐文章于 2024-12-20 15:50:50 发布

原创最新推荐文章于 2024-12-20 15:50:50 发布 · 3.9k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

javascript 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了一种在Vue开发中监听localStorage变化的方法，通过重写localStorage.setItem并利用事件监听实现跨组件通信，确保数据更新时能及时响应。

vue开发中，我们需要进行很多组件通信的操作，一般情况下我们将数据放到vuex中的时候，很容易通过计算属性和watch监听的方式进行通信，但我们的数据存储在localStorage中的时候，就需要通过localStorage.setItem的回调函数来监听值地改变了


const _this = this;
var orignalSetItem = localStorage.setItem;
localStorage.setItem = function(key,newValue){
    var setItemEvent = new Event("setItemEvent");
    setItemEvent.key = key;
    window.dispatchEvent(setItemEvent);
    orignalSetItem.apply(this,arguments);
};
window.addEventListener("setItemEvent", function (e) {
    if(e.key=='msg'){
      console.log(e)
    }
});