快捷導(dǎo)航

JavaScript實(shí)時(shí)監(jiān)聽(tīng)localStorage變化的實(shí)現(xiàn)方法小結(jié)

更新時(shí)間：2024年06月30日 13:35:49 作者：接著奏樂(lè)接著舞。

很多時(shí)候,我們?cè)贏頁(yè)面通過(guò)點(diǎn)擊之類的操作獲得一個(gè)數(shù)值,然后拿到B頁(yè)面使用,我們希望這個(gè)值是響應(yīng)式的,當(dāng)然你可以使用vue或者react的實(shí)現(xiàn),這篇文章適合想偷懶或者很多后端小伙不愿意去用的使用,效果是差不多的主要是適用于任何基于JavaScript的項(xiàng)目,需要的朋友可以參考下

在不同窗口/選項(xiàng)卡中監(jiān)聽(tīng) localStorage 變化

當(dāng) localStorage 的數(shù)據(jù)在一個(gè)窗口/選項(xiàng)卡中改變時(shí)，其他同源的窗口/選項(xiàng)卡會(huì)觸發(fā) storage 事件。我們可以利用這個(gè)事件來(lái)監(jiān)聽(tīng) localStorage 的變化。

示例代碼

// 添加 storage 事件監(jiān)聽(tīng)器
window.addEventListener('storage', function(event) {
  if (event.key === 'groupID') {
    console.log('New value:', event.newValue);
  }
});

解釋

storage 事件會(huì)在同源的其他窗口/選項(xiàng)卡中觸發(fā)。
event.key 是變化的 localStorage 項(xiàng)的鍵。
event.newValue 是變化后的新值。

注意事項(xiàng)

只有在不同的窗口/選項(xiàng)卡之間修改 localStorage 時(shí)，才會(huì)觸發(fā) storage 事件。
如果在同一個(gè)窗口/選項(xiàng)卡中修改 localStorage，則不會(huì)觸發(fā) storage 事件。

在同一個(gè)窗口/選項(xiàng)卡中監(jiān)聽(tīng) localStorage 變化

在同一個(gè)窗口/選項(xiàng)卡中，storage 事件不會(huì)被觸發(fā)。我們可以通過(guò)自定義事件或其他手段來(lái)實(shí)現(xiàn)對(duì) localStorage 變化的監(jiān)聽(tīng)。

方法一：使用自定義事件

設(shè)置 localStorage 并觸發(fā)自定義事件

function setLocalStorageItem(key, value) {
  localStorage.setItem(key, value);
  const event = new CustomEvent('localStorageChange', { detail: { key, value } });
  window.dispatchEvent(event);
}

監(jiān)聽(tīng)自定義事件

window.addEventListener('localStorageChange', function(event) {
  if (event.detail.key === 'groupID') {
    console.log('New value:', event.detail.value);
  }
});

方法二：使用定時(shí)器輪詢

另一種方法是在一定時(shí)間間隔內(nèi)輪詢 localStorage 的值，檢查是否發(fā)生變化。

let lastValue = localStorage.getItem('groupID');

setInterval(function() {
  const newValue = localStorage.getItem('groupID');
  if (newValue !== lastValue) {
    console.log('New value:', newValue);
    lastValue = newValue;
  }
}, 1000); // 每秒檢查一次

方法三：使用 Proxy 對(duì)象

如果希望對(duì)所有的 localStorage 操作進(jìn)行代理，可以使用 Proxy 對(duì)象。

const localStorageProxy = new Proxy(localStorage, {
  set(target, key, value) {
    target.setItem(key, value);
    const event = new CustomEvent('localStorageChange', { detail: { key, value } });
    window.dispatchEvent(event);
    return true;
  }
});

// 設(shè)置值時(shí)使用代理對(duì)象
localStorageProxy.groupID = 'newValue';

// 監(jiān)聽(tīng)自定義事件
window.addEventListener('localStorageChange', function(event) {
  if (event.detail.key === 'groupID') {
    console.log('New value:', event.detail.value);
  }
});

示例：通過(guò) localStorage 監(jiān)聽(tīng)實(shí)現(xiàn)頁(yè)面間通信

假設(shè)我們有兩個(gè)頁(yè)面，頁(yè)面A設(shè)置 localStorage 中的 groupID 值，頁(yè)面B監(jiān)聽(tīng) groupID 的變化并根據(jù)最新的值執(zhí)行相應(yīng)的邏輯。

頁(yè)面A：設(shè)置 localStorage 并觸發(fā)自定義事件

const sss = (node, data) => {
  let id = data.id.split('_')[1];
  alert(id);

  localStorage.setItem('groupID', id);
  // 手動(dòng)觸發(fā)自定義事件
  const event = new CustomEvent('localStorageChange', { detail: { key: 'groupID', value: id } });
  window.dispatchEvent(event);
};

頁(yè)面B：監(jiān)聽(tīng)自定義事件并獲取最新的 groupID 值

mounted() {
  let _this = this;

  // 初次加載時(shí)獲取數(shù)據(jù)
  _this.getData();

  // 使用自定義事件監(jiān)聽(tīng) groupID 變化
  window.addEventListener('localStorageChange', function(event) {
    if (event.detail.key === 'groupID') {
      alert('1');
      _this.getData();
    }
  });
},

methods: {
  async getData() {
    const id = localStorage.getItem('groupID');

    // 檢查 id 是否存在
    if (!id) {
      this.$message({
        message: 'Group ID 不存在，請(qǐng)先選擇一個(gè)組。',
        type: 'warning'
      });
      return;
    }

    try {
      const res = await traffic.trafficvulndel({
        page: this.formData.page_num,
        size: this.pageSize,
        search: this.formData.search_field,
        groupID: id,
        ...this.formData
      });
      
      if (res.code === 200) {
        this.tableData = res.data.assetsInfo;
        console.log(this.tableData, 'this.tableData');
        this.totalpage = res.data.count;
      } else {
        this.$message({
          message: res.msg,
          type: 'error'
        });
      }
    } catch (error) {
      console.log(error);
      this.$message({
        message: '請(qǐng)求失敗，請(qǐng)稍后再試。',
        type: 'error'
      });
    }
  }
}

以上就是JavaScript實(shí)時(shí)監(jiān)聽(tīng)localStorage變化的實(shí)現(xiàn)方法小結(jié)的詳細(xì)內(nèi)容，更多關(guān)于JavaScript監(jiān)聽(tīng)localStorage變化的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: