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

更新時間：2024年06月30日 13:35:49 作者：接著奏樂接著舞。

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

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

當 localStorage 的數(shù)據(jù)在一個窗口/選項卡中改變時，其他同源的窗口/選項卡會觸發(fā) storage 事件。我們可以利用這個事件來監(jiān)聽 localStorage 的變化。

示例代碼

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

解釋

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

注意事項

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

在同一個窗口/選項卡中監(jiān)聽 localStorage 變化

在同一個窗口/選項卡中，storage 事件不會被觸發(fā)。我們可以通過自定義事件或其他手段來實現(xiàn)對 localStorage 變化的監(jiān)聽。

方法一：使用自定義事件

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

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

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

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

方法二：使用定時器輪詢

另一種方法是在一定時間間隔內(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 對象

如果希望對所有的 localStorage 操作進行代理，可以使用 Proxy 對象。

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;
  }
});

// 設置值時使用代理對象
localStorageProxy.groupID = 'newValue';

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

示例：通過 localStorage 監(jiān)聽實現(xiàn)頁面間通信

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

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

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

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

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

mounted() {
  let _this = this;

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

  // 使用自定義事件監(jiān)聽 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 不存在，請先選擇一個組。',
        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: '請求失敗，請稍后再試。',
        type: 'error'
      });
    }
  }
}

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

您可能感興趣的文章: