HTML5 localStorage в Javascript

Объект window имеет  свойства localStorage и sessionStorage. Объект localStorage не имеет срока хранения информации (может хранить вечно), а sessionStorage очищается в момент завершения сессии браузера. Преимущества localStorage и sessionStorage перед куками:

  1. Можно хранить значительно больше информации. Около 5 Мбайт для большинства браузеров.
  2. Значение из хранилищ НЕ передаются на сервер при каждом запросе.

У браузеров, поддерживающих хранилища, переменные localStorage и sessionStorage определены на уровне окна. Поддержку localStorage, например, можно определить так: 'localStorage' in window && window['localStorage'] !== null .

Полезные методы этих хранилищ:

localStorage.getItem(key);
sessionStorage.getItem(key);

Возвращает значение по ключу.

localStorage.setItem(key, value);
sessionStorage.setItem(key, value);

Добавляет значение value для ключа key в хранилище. И key и value являются строками. То есть метод устанавливает строковое значения для строкового ключа. После установки значение можно вытащить по ключу с помощью метода getItem.

localStorage.removeItem(key);
sessionStorage.removeItem(key);

Удаляет пару ключ-значение из хранилища.

localStorage.clear();
sessionStorage.clear();

Удаляет все пары ключ-значение из хранилища.

Размеры хранилищ ограничены. В разных браузерах стоят разные ограничения на размер хранилищ localStorage и sessionStorage.

Можно отслеживать изменения в хранилищах. Для этого нужно повесить обработчик события storage на объект window:

Внимание! Обработчик события не работает на той же странице. Он будет вызываться только при изменении localStorage на страницах с тем же доменом.

 

Пример использования localStorage:

 

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *