Куки, которые мы разбирали в предыдущем уроке, очень ограничены: в одной куке может быть всего 4096 символов, а количество кук на один домен может быть примерно 30-50 в зависимости от браузера. Поэтому, увы, но много информации там хранить не получится. Так уж сложилось исторически.

Чтобы обойти это ограничение в браузерах появилась альтернатива кукам - она называется локальное хранилище. В локальном хранилище мы можем хранить 5-10 мегабайт информации или даже больше на длительное время.

Работа с локальным хранилищем

Для работы с локальным хранилищем предназначен встроенный в браузер объект localStorage. У него есть 4 простых для понимания методов. Вот они:

//Сохранение значения:
localStorage.setItem('Ключ', 'Значение');

//Получение значения:
var value = localStorage.getItem('Ключ');

//Удаление значения:
localStorage.removeItem('Ключ');

//Очистка всего хранилища:
localStorage.clear();

С localStorage можно также работать как с обычным массивом:

//Сохранение значения:
localStorage['Ключ'] = 'Значение';

//Получение значения:
var value = localStorage['Ключ'];

//Удаление значения:
delete localStorage['Ключ'];

Кроме объекта localStorage есть также объект sessionStorage. Работа с ним осуществляется так же, единственное отличие в том, что все данные из него автоматически уничтожаются после закрытия браузера или вкладки с сайтом. Ну, а localStorage хранит данные длительное время, пока эти данные не будут удалены скриптом, или пользователь браузера очистит локальное хранилище с помощью настроек.

Примеры

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

localStorage.setItem('name', 'Иван');

Через некоторое время получим это имя обратно:

alert(localStorage.getItem('name'));

Как вы видите - ничего сложно здесь нет, все гораздо проще, чем та же работа с куками.

Сохранение объектов

Локальное хранилище не способно хранить объекты и массивы JavaScript, хотя это зачастую бывает удобно. Но способ есть - нужно сериализовать эти данные в формат JSON - получится строка, которую уже можно будет сохранить в localStorage. Затем, когда нам понадобится достать этот объект обратно - преобразуем строку из JSON обратно в объект - и спокойно им пользуемся.

Давайте рассмотрим этот процесс на примере. Сериализуем объект и сохраним в локальное хранилище:

//Дан объект:
var obj = {name: 'Иван', arr: [1, 2, 3]};

//Сериализуем его в '{"name": "Иван", "arr": [1, 2, 3]}':
var json = JSON.stringify(obj);

//Запишем в localStorage с ключом obj:
localStorage.setItem('obj', json);

Через некоторое время получим объект обратно:

//Получим данные обратно из localStorage в виде JSON:
var json = localStorage.getItem('obj');

//Преобразуем их обратно в объект JavaScript:
var obj = JSON.parse(json);
console.log(obj);

Дополнительные возможности

Определение количества записей в хранилище: alert(localStorage.length).

Определение названия ключа по его номеру: alert(localStorage.key(номер)).

При выполнении операций с хранилищем, срабатывает событие onstorage. Если к этому событию привязать функцию - то в ней будет доступен объект Event со следующими свойствами:

<body onstorage="func()">
function func(event) {
	var key = event.key; //ключ изменяемых данных
	var oldValue = event.oldValue; //старое значение
	var newValue = event.newValue; //новое значение
	var storageArea = event.storageArea; //storageArea
 }