HTML5 предусматривает возможность хранить данные средствами браузера. Это мощная, удобная альтернатива cookie.
Краткое руководство по использованию:
В общем, появилось 2 стандартных объекта: localStorage и sessionStorage.
Это локальные хранилища данных виду ключ/значение (key/value).
Они хранят данные в пределах сайта.
sessionStorage отличается от localStorage тем, что все данные с него автоматически уничтожаются после закрытия веб-браузера или, даже, вкладки.
Интерфейс взаимодействия для localStorage и для sessionStorage одинаков, поэтому все последующие примеру будут рассмотрены на примере localStorage.
Сохраняются данные следующим образом:
// с помощью метода setItem()
localStorage.setItem("myVar1", "abc");
// или как свойства объекта
localStorage.myVar2 = 123;
localStorage["myVar3"] = true;
Получить данные можно следующим образом:
// с помощью метода getItem()
var val1 = localStorage.getItem("myVar1");
// или как свойства объекта
var val2 = localStorage.myVar2;
var val3 = localStorage["myVar3"];
Удалить данные можно так:
// с помощью метода removeItem()
localStorage.removeItem("myVar1");
// или как свойства объекта
delete localStorage.myVar2;
Также, можно очистить всё хранилище сразу:
// с помощью метода clear()
localStorage.clear();
Определение количества записей в хранилище:
// свойство length
var items = localStorage.length;
Определение названия ключа по его индексу:
// метод key()
var keyName = localStorage.key(index);
При выполнении операций с хранилищем, срабатывает событие onstorage.
Допустим, у нас есть функция обработки таких событий storageHandler().
Тогда в html-коде можем записать так:
<body onstorage="storageHandler()">
или в javascript:
window.addEventListener("storage", storageHandler, false);
// примечание: для IE нужно использовать метод: attacheEvent()
В функции обработки объект события предоставляет нам такие свойства связанные с хранилищем:
function storageHandler(event) {
var key = event.key; // Ключ изменяемых данных
var oldValue = event.oldValue; // Старое значение
var newValue = event.newValue; // Новое значение
var win = event.window; // Окно
var url = event.url; // URL (в некоторых браузерах - "uri")
var storageArea = event.storageArea; //storageArea
}
Обратите внимание, что на данный момент представленное API реализовано еще не во всех современных веб-браузерах. Также работоспособность данной технологии может зависеть от типа документа (является ли тип документа — HTML5).
localStorage никогда не будет «мощной, удобной альтернативой cookie». Это абсолютно разные вещи.
Очень полезная информация для начинающих разбираться в локальное хранилище, спасибо автору.