Шпаргалка о localStorage

С приходом HTML5 веб-разработчики получили один очень удобный инструмент - сохранение данных на стороне клиента. Конечно же, ранее разработчики могли использовать cookies или flash-вставки, для сохранения данных, но первый способ грешил небольшими размерами (4 Кб) и отправкой данных на сервер (при условии, если нам не нужна данная особенность -> лишние данные для сервера -> лишнии нагрузки). Второй же способ предполагал использование сторонних плагинов.

Что из себя представляет localStorage?


localStorage - объект window, с методами и свойствами, которые позволяют:
1) устанавливать\\удалять свойства объектов
2) получать имена ключей/количество элементов в localStorage.

localStorage поддерживается во всех современных браузерах. Для IE поддержка localStorage была добавлена с 8-й версии (IE8+)

Для определения доступности localStorage достаточно проверить на существование объект window.localStorage:
  1. function checkLocalStorage()
  2. {
  3.    try {
  4.       return ''localStorage'' in window && window[''localStorage''] !== null && localStorage != undefined;
  5.    } catch (e) {
  6.       return false;
  7.    }
  8. }

This code was highlighted with code.xnim.ru


Хранение данных


localStorage создан для получения возможности более гибкой работы веб-приложений. С его помощью можно хранить любое количество данных (ограничение современных браузеров ~5 Мб на домен)
Проще всего способ хранения данных можно представить аналогично ассоциативному словарю. localStorage хранит пары ключ-значение, где ключ является числом, либо строкой, а значение представляет собой строку.
Для хранения объектов в localStorage, как правило, используют JSON представление объекта.

Добавление, чтение и удаление значений



Добавление


Для добавления или изменения элементов используется метод setItem:

setItem(key, value) - добавляет к объекту localStorage свойство с именем key и значением value.
Пример использования:
localStorage.setItem("testKey" ,"testValue" );
This code was highlighted with code.xnim.ru


Также работать с данными в localStorage можно аналогично как и с простыми объектами:
localStorage.testKey = "testValue2" ;
localStorage["testKey" ] = "testValue3" ;

This code was highlighted with code.xnim.ru


Чтение


Для чтения используется метод getItem:

getItem(key) - получает {String} значение по заданному ключу.

Пример использования:
var testVariable = localStorage.getItem("testKey" );
This code was highlighted with code.xnim.ru


Также поддерживается и объектная нотация:
var testVariable = localStorage.testKey;
var oneMoreVariable = localStorage["testKey" ];

This code was highlighted with code.xnim.ru


Удаление



Удалить можно либо все данные из localStorage, либо отдельные записи:

removeItem(key) - удаление записи с ключом key.

Пример работы:

localStorage.removeItem("testKey" );
This code was highlighted with code.xnim.ru


clear() - удаление всех записей localStorage.

Обход localStorage



localStorage имеет свойство length, которое, в отличие от массивов js, указывает на общее количество элементов в хранилище. Например:
var a = [10];
a.q = 102 ;
console.log(a.length); // будет выведено 1

localStorage[0] = 10 ;
localStorage.q = 102 ;
console.log(localStorage.length); //будет выведено 2

This code was highlighted with code.xnim.ru


Также localStorage предоставляет метод key(index), который позволит получить имя элемента, расположенного по заданному индексу:
localStorage[0] = 10 ;
localStorage.q = 102 ;
for
(var i = 0 ; i < localStorage.length; i++)
{
   console.log("По имени " + localStorage.key(i) + " распложено значение: " + localStorage[localStorage.key(i)])
}

This code was highlighted with code.xnim.ru


Также обойти элементы localStorage возможно с помощью цикла for:
localStorage[0] = 10 ;
localStorage.q = 102 ;
for
(var i in localStorage)
{
   console.log("По имени " + i + " расположено значение: " + localStorage[i])
}

This code was highlighted with code.xnim.ru


События


localStorage предоставляет событие storage, которое позволяет отслеживать изменения в хранилище.
Все браузеры, кроме ie8 поддерживают метод addEventListener. В случае же с ie8, придется воспользоваться методом attachEvent:
if (window.addEventListener) {
window.addEventListener("storage" , localStorageHandle, false);
} else {
window.attachEvent("onstorage" , localStorageHandle);
};

This code was highlighted with code.xnim.ru


В функции-обработчике события определены следующие свойства:
1) key - ключ
2) oldValue - предыдущее значение (если было)
3) newValue - новое значение
4) url (или uri) - страница, побудившая событие (вызвавшая метод, изменяющий localStorage)

Посмотреть простые примеры использования



Примеры веб-приложений\\виджетов, использующих localStorage:

1) простейшая экпертная система
2) виджет календаря
3) тестовое задание в школу программистов headHunter
2013-10-08