Как привязать к событию изменения localStorage, используя jQuery для всех браузеров?

Question

Как связать функцию с событием изменения localStorage HTML5 с помощью jQuery?

$(function () {

  $(window).bind('storage', function (e) {
    alert('storage changed');
  });

  localStorage.setItem('a', 'test');

});

Я пробовал описанное выше, но предупреждение не отображается.

Обновление : он работает в Firefox 3.6, но не работает в Chrome 8 или IE 8, поэтому вопрос должен быть более «Как привязать событие localStorage к изменению, используя jQuery для всех браузеров?» 1008 *

Answer 1

Оказывается, что это на самом деле работает правильно, и я неправильно истолковал спецификацию

Когда вызваны методы setItem (), removeItem () и clear ()в объекте Storage x, который связан с локальной областью хранения, если методы что-то сделали, то в каждом объекте Document, объект Storage которого атрибута localStorage объекта Window связан с той же областью хранения, кроме x, событие хранилища должно быть запущено

Другими словами, событие хранения запускается в каждом окне / вкладке , кроме для того, которое обновило объект localStorage и вызвало событие.

Таким образом, событие не было запущено, потому что у меня было только одно открытое окно / вкладка.Если бы я поместил вышеуказанный код на страницу и открыл страницу на двух вкладках, я увидел бы событие, запущенное на второй вкладке.

В этом ответе на проблему содержится больше подробностей.

Answer 2

Вот как это сделать в JQuery:

 $(window).bind('storage', function (e) {
     console.log(e.originalEvent.key, e.originalEvent.newValue);
 });

Доступ к e.key напрямую не работает. Вам нужно использовать e.originalEvent.key.

Некоторые браузеры отправляют уведомления о хранении только на другие вкладки, а некоторые нет. (Firefox будет отправлять события хранилища на свою собственную вкладку, но с key, установленным в null, похоже).

Answer 3

Следует отметить, что обработчик событий вызывается только на .setItem, если элемент на самом деле изменяется.Я рвал на себе волосы, пытаясь заставить это работать, пока не понял, что вы не можете продолжать запускать setItem с тем же значением.

Я нахожусь на версии Chrome 54.0.2840.71 m

Воттест (откройте его на двух вкладках браузера).

if (window.addEventListener)
            addEventListener('storage', storage_event, false);
        else if (window.attachEvent)
            attachEvent('onstorage', storage_event, false);
        function storage_event(e) {
            console.log("Time is now "+ e.newValue);
        }

        setInterval(function () {
            var time=new Date().getTime();
            localStorage.setItem("time", time);
            console.log("Setting time to "+time);
        }, 1000)

Answer 4

Вы всегда можете использовать такую ​​утилиту, как localDataStorage , чтобы запускать события для вас в одном и том же окне / вкладке при каждом изменении значения ключа, например, сделанного методами set или remove.Вы также можете использовать его для прозрачной установки / получения любого из следующих «типов»: массив, логическое значение, дата, число с плавающей точкой, целое число, ноль, объект или строка.

[ОТКАЗ ОТ ОТВЕТСТВЕННОСТИ] Я являюсь автором утилиты[/ DISCLAIMER]

Как только вы создадите экземпляр утилиты, следующий фрагмент позволит вам отслеживать события (в vanilla JS, поскольку примеры jQuery уже были приведены):

function localStorageChangeEvents( e ) {
    console.log(
        "timestamp: "     + e.detail.timestamp + " (" + new Date( e.detail.timestamp ) + ")" + "\n" +
        "key: "           + e.detail.key     + "\n" +
        "old value: "     + e.detail.oldval  + "\n" +
        "new value: "     + e.detail.newval  + "\n"
    );
};
document.addEventListener(
    "localDataStorage"
    , localStorageChangeEvents
    , false
);