Объект window имеет свойства localStorage и sessionStorage. Объект localStorage не имеет срока хранения информации (может хранить вечно), а sessionStorage очищается в момент завершения сессии браузера. Преимущества localStorage и sessionStorage перед куками:
- Можно хранить значительно больше информации. Около 5 Мбайт для большинства браузеров.
- Значение из хранилищ НЕ передаются на сервер при каждом запросе.
У браузеров, поддерживающих хранилища, переменные 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:
1 2 3 4 5 6 7 |
window.addEventListener('storage', function(e) { alert('ключ: ' + e.key); alert('старое значение: ' + e.oldValue); alert('новое значение: ' + e.newValue); alert('Страница, вызвавшая метод изменения: ' + e.url); alert('Область: ' + e.storageArea); }); |
Внимание! Обработчик события не работает на той же странице. Он будет вызываться только при изменении localStorage на страницах с тем же доменом.
Пример использования localStorage:
1 2 |
localStorage.setItem('k1', 'Vasya'); alert(localStorage.getItem('k1')); // Vasya |