Перезагрузить все открытые вкладки на localStorage изменить элемент JavaScript

Question

Я хочу перезагрузить страницы определенного сайта на всех открытых вкладках при изменении значения в локальном хранилище. Как мне этого добиться?

Answer 1

Вы можете подписаться на события хранения следующим образом:

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

Как отмечено в связанной документации:

Событие хранения интерфейса Window.срабатывает, когда область хранения (localStorage или sessionStorage) была изменена в контексте другого документа.

Обратите внимание, что это ограничено вкладками, которые имеют доступ к одному и тому же локальному хранилищу (ограничено доменомвеб-сайт).

Answer 2

Вот решение для обновления всех с использованием одного и того же приложения Angular

Шаг 1: Составьте список всех открытых вкладок с уникальным идентификатором.

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

ИЛИ (Подписаться на события хранения)

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

Примечание: Не следует перезагружать угловое приложение, а скорее направить на страницу аутентификации или обновить компонент