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

Question

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

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

$(function () {



  $(window).bind('storage', function (e) {

    alert('storage changed');

  });



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



});

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

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

650 4

jQuery google-chrome html5

4 ответов:

Comments

Ничего не найдено.

David Glenn · Accepted Answer · 2017-05-23 15:26:04

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

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

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

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

это ответ на вопрос содержит более подробную информацию.

Flimm · Accepted Answer · 2018-07-17 20:04:50

вот как это сделать в JQuery:
 $(window).bind('storage', function (e) {
     console.log(e.originalEvent.key, e.originalEvent.newValue);
 });
ссылке e.key напрямую не работает. Вы должны использовать e.originalEvent.key.

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

kmoney12 · Accepted Answer · 2016-10-28 10:22:08

следует отметить, что обработчик событий вызывается только на .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)

Mac · Accepted Answer · 2017-11-08 22:43:40

вы всегда можете использовать такую утилиту, как localDataStorage чтобы запускать события для вас, в том же окне/вкладке, всякий раз, когда изменяется значение ключа, например, сделанные с помощью методов set или remove. Вы также можете использовать его для прозрачного задания/получения любого из следующих "типов": Array, Boolean, Date, Float, Integer, Null, Object или String.

[отказ от ответственности] я являюсь автором утилиты [/отказ от ответственности]

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