react下跨組件跨頁面監聽localStorage變化

最新推荐文章于 2024-11-25 10:29:29 发布

yb_fan

最新推荐文章于 2024-11-25 10:29:29 发布

阅读量878

点赞数 2

分类专栏： js 文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/baidu_36900317/article/details/122239017

版权

js 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

1、在setItem的地方配置如下代碼

  if (typeof window !== "undefined") {

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

    localStorage.setItem("onbehalf", JSON.stringify(onbehalf));
  }

2、在需要使用localStorage新值的地方添加監聽函數,如下代碼

 //listener localStorage change
  if (typeof window !== "undefined") {
    window.addEventListener("setItemEvent", function (e) {
      let newUser = JSON.parse(e.newValue);
      if (login?.ada !== newUser?.ada) {
        setShowPoint(true)
      } else {
        setShowPoint(false)
      }
    });
  }