Question

当本地存储中的值更改时，我想在所有打开的选项卡上重新加载特定站点的页面。我该如何实现？

Answer 1

您可以像这样订阅storage events：

window.addEventListener('storage', function(e) {  
    // Some storage value changed. Reload tab!
});

如链接文档中所述：

在另一个文档的上下文中修改了存储区域（localStorage或sessionStorage）时，将触发Window接口的存储事件。

请注意，这仅限于可以访问相同本地存储的标签（受网站域限制）。

Answer 2

这是使用同一Angular应用程序刷新所有内容的解决方案

步骤1：列出所有具有唯一ID的已打开标签页。

const myTab = sessionStorage.tabID ? sessionStorage.tabID: Math.random();
let tabList = JSON.parse(localStorage.getItem('tabList'));
if(!tabList) tabList = {};

tabList[myTab] = { refresh: false, updated_ts: new Date() };
localStorage.setItem('tabList', JSON.stringify(tabList));

步骤2：监视本地存储中的活动。 [这可以通过多种方式完成]

setInterval(function(){ 
  let tabList = JSON.parse(localStorage.getItem('tabList'));
  if(tabList && tabList[myTab] && tabList[myTab].refresh){
    delete tabList[myTab];
    localStorage.setItem('tabList', JSON.stringify(tabList));
    console.log("Do refesh");
    // location.reload();

  }
  else{
    console.log("Don't refesh");
  }
}, 3000);

OR （订阅存储事件）

window.addEventListener('storage', function(e) {  
    // Your logic
});

第3步：触发刷新

function triggerRefesh() {
  let tabList = JSON.parse(localStorage.getItem('tabList'));
  if(tabList) for (const tabID in tabList) tabList[tabID].refesh = true;
  localStorage.setItem('tabList', JSON.stringify(tabList));
}

注意：您不应重新加载有角度的应用程序，而应转到身份验证页面或刷新组件

重新加载localStorage项目更改javascript上的所有打开的标签页

2 个答案: