Окно: событие storage

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

Это событие не отменяется и не распространяется.

Используйте имя события в методах, таких как addEventListener(), или задайте свойство обработчика события.

addEventListener("storage", (event) => {});
onstorage = (event) => {};

Объект StorageEvent. Наследуется от Event.

key Только чтение

Возвращает строку с ключом для элемента хранилища, который был изменён. Свойство key равно null, когда изменение вызвано методом clear() хранилища.

newValue Только чтение

Возвращает строку с новым значением элемента хранилища, который был изменён. Это значение равно null при вызове метода clear() хранилища или при удалении элемента из хранилища.

oldValue Только чтение

Возвращает строку с исходным значением элемента хранилища, который был изменён. Это значение равно null , если элемент хранилища был только что добавлен и, следовательно, не имеет предыдущего значения.

storageArea Только чтение

Возвращает объект Storage, представляющий объект хранилища, который был затронут.

url Только чтение

Возвращает строку с URL документа, хранилище которого изменилось.

Помимо интерфейса Window, свойство обработчика событий onstorage также доступно для следующих целей:

• HTMLBodyElement
• HTMLFrameSetElement
• SVGSVGElement

Вывести элемент sampleList в консоль, когда срабатывает событие storage.

window.addEventListener("storage", () => {
  // When local storage changes, dump the list to
  // the console.
  console.log(JSON.parse(window.localStorage.getItem("sampleList")));
});

Того же результата можно достичь, используя свойство обработчика событий onstorage:

window.onstorage = () => {
  // When local storage changes, dump the list to
  // the console.
  console.log(JSON.parse(window.localStorage.getItem("sampleList")));
};

• API хранилища веб-страниц
• Использование API хранилища веб-страниц
• Обработка изменений хранилища с помощью StorageEvent