vue监听本地localStorage变化

最新推荐文章于 2024-07-01 00:20:20 发布

、Diamond

最新推荐文章于 2024-07-01 00:20:20 发布

阅读量293

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/weixin_43136717/article/details/127651484

版权

vue监听本地localStorage变化

tool.js

// 重写setItem事件，当使用setItem的时候，触发，window.dispatchEvent派发事件
function dispatchEventStroage() {
    const signSetItem = localStorage.setItem
    localStorage.setItem = function(key, val) {
        let setEvent = new Event('setItemEvent')
        setEvent.key = key
        setEvent.newValue = val
        window.dispatchEvent(setEvent)
        signSetItem.apply(this, arguments)
    }
}

export default dispatchEventStroage;

main.js

import tool from "@/publicStorage/tool.js"; // 改成你的路径
app.use(tool)

需要监听的组件

onMounted(() => {
  window.addEventListener("setItemEvent", (event) => {
    if (event.key === "yourkey") {
      console.log(event.newValue); // yourkey 对应的新值
    }
  });
});