Как хранить значения в локальном хранилище HTML5

Основы локального хранения

Локальное хранилище предлагает простое хранилище значений ключей, например, хеш-таблицу или словарь. Локальное хранилище поставляется в двух версиях:

1. Хранилище сессий
2. Локальное хранилище

Хранение сеанса доступно в одном и том же окне браузера, пока оно открыто. Когда окно браузера закрывается, хранилище сеанса, связанное с этим окном, удаляется. Несколько окон из одного источника (URL) не могут видеть хранилище сеанса друг друга. Всплывающие окна, открытые из одного и того же окна, могут видеть хранилище сеанса, а также фреймы внутри одного и того же окна.

Локальное хранилище доступно в браузере всем окнам с одинаковым происхождением (доменом). Данные, хранящиеся в локальном хранилище, также доступны после закрытия окна. При следующем открытии окна и загрузке страницы из того же источника страница снова сможет получить доступ к сохраненным значениям.

sessionStorage + localStorage

Хранилище сеанса и локальное хранилище доступны через два глобально доступных объекта JavaScript:

• sessionStorage
• LocalStorage

Доступ к объекту sessionStorage и объекту localStorage осуществляется одинаково. Только они отличаются продолжительностью жизни и видимостью хранимых данных.

Вы можете установить свойства для объекта sessionStorage и localStorage, как с обычным объектом JavaScript. Вот пример:

sessionStorage.myProperty = "Hello World";

localStorage.myProperty   = "Hello World";

Первая строка этого примера кода устанавливает для свойства хранения сеанса myProperty значение Hello World. Вторая строка устанавливает для свойства локального хранилища myProperty значение Hello World.

Вы можете хранить только строки в свойствах сеанса и локального хранилища. Ничего больше. Если вам нужно хранить объекты JavaScript, вам сначала нужно преобразовать их в строку JSON.

Вы удаляете свойство сеанса или локального хранилища следующим образом:

delete sessionStorage.myProperty;

delete localStorage.myProperty;

Вы также можете использовать следующие три метода для доступа к свойствам в сеансе или локальном хранилище:

sessionStorage.setItem    ('propertyName', 'value');
sessionStorage.getItem    ('propertyName');
sessionStorage.removeItem ('propertyName');

localStorage.setItem      ('propertyName', 'value');
localStorage.getItem      ('propertyName');
localStorage.removeItem   ('propertyName');

Эти методы также допускают только строковые значения.

Итерация ключей в локальном хранилище

Вы можете перебирать ключи (имена свойств) пар ключ-значение, хранящихся в сеансе или локальном хранилище, например:

for(var i=0; i < sessionStorage.length; i++){

    var propertyName = sessionStorage.key(i);

    alert(  i + " : " + propertyName + " = " +
            sessionStorage.getItem(propertyName));
}

Свойство sessionStorage.length возвращает количество свойств, хранящихся в объекте sessionStorage.

Функция key () возвращает имя свойства (или имя ключа) свойства с индексом, переданным в качестве параметра функции.

События хранения

Объекты хранения запускают события, которые ваше приложение может прослушивать. Событие хранилища вызывается при вставке, обновлении или удалении свойства сеанса или локального хранилища.

Событие хранения генерируется только в других окнах браузера, кроме того, которое вставляло, обновляло или удаляло сеанс или локальные объекты хранения.

Для хранения сессии это означает, что события видны только во всплывающих окнах и фреймах.

Для локального хранилища события видны для всех других окон, открытых с тем же источником, включая всплывающие окна и фреймы.

Присоединение слушателя событий хранилища

Присоединение слушателя события к объекту хранения выполняется следующим образом:

function onStorageEvent(storageEvent){

    alert("storage event");
}

window.addEventListener('storage', onStorageEvent, false);

Функция onStorageEvent () является функцией обработчика событий.

Вызов функции addEventListener () присоединяет функцию-обработчик событий к событиям хранения.

Объект события storageEvent, переданный в функцию-обработчик события, выглядит следующим образом:

StorageEvent {
    key;          // name of the property set, changed etc.
    oldValue;     // old value of property before change
    newValue;     // new value of property after change
    url;          // url of page that made the change
    storageArea;  // localStorage or sessionStorage,
                  // depending on where the change happened.
}

Вы можете получить доступ к этому объекту события хранения из функции обработчика событий.