Listen / Observe - изменения в LocalStorage с использованием store.js

Question

Я использую store.js (библиотека JS) для управления локальным хранилищем.

Что я пытаюсь сделать

Сохранитьзначение client в localStorage в одной вкладке браузера, а затем, когда значение изменяется, я хочу прослушать измененное значение.

Проблема

Приведенный ниже код работает на той же вкладке браузера, но когда я проверяю другую вкладку, событие изменения не срабатывает.

store.set('client', {
  'name': Math.random()
});

$('#mybtn1').click(function() {
  store.set('client', {
    'name': Math.random()
  });
});


store.observe('client', function(val, oldVal) {
  console.log('changed');
  console.log(store.get('client'));
});

<script src="https://raw.githubusercontent.com/marcuswestin/store.js/master/dist/store.everything.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="mybtn1" type="button">click</button>

Помощь

Подскажите, пожалуйста, что я делаю не так.Я также открыт для использования Jquery для прослушивания этих изменений.

Answer 1

У меня была похожая проблема с store.js, поэтому я решил использовать чистый localStorage и подход прослушивателя событий для реализации проблемы.

Вот рабочий JSFiddle: Обнаружение изменения localStorage на другой вкладке браузера

Объяснение:

Это использует API веб-хранилища.

Вы можете создать новую пару ключ-значение localStorage, используя вызов,

localStorage.setItem("current_tenant", "Tenant1");

Теперь, когда это хранилище изменяется, запускается StorageEvent.Это событие отправляется только в другие окна.

StorageEvent запускается всякий раз, когда вносится изменение в объект Storage (обратите внимание, что это событие не запускается для изменений sessionStorage).Это не будет работать на той же странице, где вносятся изменения, - это действительно способ для других страниц в домене использовать хранилище для синхронизации любых внесенных изменений.Страницы других доменов не могут получить доступ к тем же объектам хранения.Источник: MDN Web Docs

Затем вы можете добавить прослушиватель событий в это хранилище и обнаруживать изменения, используя свойства событий oldValue и newValue Например,

Преобразовал ваш пример в JSFiddle и вот решение, которое сочетает в себе storeJS и StorageEvent