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

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

$(function () {

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

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

});

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

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

 RobertPitt12 янв. 2011 г., 18:44
да, возможно, вам придется создать обертку
 jAndy12 янв. 2011 г., 18:50
довольно странно Chrome не работает? Я знаю, что это было в прошлом.
 jAndy12 янв. 2011 г., 18:38
у меня отлично работает Возможно, вам следует добавить немного функции обнаружения ..if(!localStorage in window) alert('foobar'); typeofnan.blogspot.com/2010/09/...
 lonesomeday12 янв. 2011 г., 18:41
Это работает для меня в Firefox, но не в Chrome. Действительно, я не могу заставить Chrome работать сaddEventListener или.
 RobertPitt12 янв. 2011 г., 18:41
@jAndy вы используете сафари, и я также проверил его решение, но тот же результат, я думаю, что он может не поддерживаться

Ответы на вопрос(4)

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

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

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

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

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

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

Как только вы создадите экземпляр утилиты, следующий фрагмент позволит вам отслеживать события (в 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
);
Решение Вопроса

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

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

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

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

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

 Dave Lockhart19 дек. 2012 г., 23:53
Firefox, похоже, исправил проблему, однако IE9 и IE10 все еще не соответствуют спецификации. Они запускают событие во ВСЕХ окнах / вкладках, включая ту, которая вызвала изменение. Я поднял эту ошибку с Microsoft здесь (требует входа в систему, к сожалению):connect.microsoft.com/IE/feedback/details/774798/...
 David Glenn14 янв. 2011 г., 09:05
Реализация спецификации Firefox (в 3.6) неверна, так как она запускает событие в окне, которое обновило localStorage
 Got The Fever Media02 дек. 2014 г., 15:03
Спасибо за это! Я два дня сходил с ума, удивляясь, почему мое локальное хранилище обновлялось на моих глазах дважды, когда я ничего не делал ... У меня открылось другое окно, в которое вошел другой пользователь, в котором хранились разные данные. Но, конечно, с локальным хранилищем, разделяемым между доменами, вот почему! еще раз спасибо
 nitely31 дек. 2013 г., 09:38
Выполнение <unbind, setItem, bind> в качестве обходного пути, похоже, работает.

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

Я на Chrome версии 54.0.2840.71 м

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

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)
 Honzík08 дек. 2016 г., 12:25
addEventListener поддерживается во всех браузерах (caniuse.com/#search=addEventListener)

Ваш ответ на вопрос