Локальное хранилище в JavaScript (localStorage)

В JavaScript есть объект localStorage, который позволяет считывать и записывать данные в локальное хранилище. В localStorage можно длительное время хранить до 10 мегабайт информации, в которой может содержаться сколько угодно переменных. Этим локальное хранилище выгодно отличается от cookies, в которых можно хранить только 30 переменных на домен со значением короче 4096 символов.

Создание и изменение в локальном хранилище

Чтобы создать (записать) или изменить значение в локальном хранилище, используется метод setItem:

localStorage.setItem('Ключ', 'Значение');

Тогда изменится запись с названием "Ключ". Её значение будет установлено на "Значение". Если запись в локальном хранилище с таким названием уже была, то она перезапишется. Вместо "Ключ" и "Значение" в примере можно подставить любой текст или цифры, чтобы сохранить их в хранилище.

Вы можете просматривать и редактировать в локальное хранилище прямо в браузере, с помощью средств разработчика. Читайте подробнее об этом в статье "Редактор localStorage в вашем браузере".

Есть ещё один способ записать/изменить значение в локальном хранилище:

localStorage['Ключ'] = 'Значение';

В локальном хранилище можно хранить только строки, как и в cookies. Но его размера вполне достаточно, чтобы поместить туда сериализованные данные в формате JSON.

Рекомендуем ознакомиться со статьёй "Работа с JSON в JavaScript (stringify, parse)", чтобы больше узнать о формате JSON.

Продемонстрируем способ записи объекта в локальное хранилище путём перевода его в JSON строку:

var a = {
   'BOOL': true,
   'INT': 20,
   'ARRAY': [1, 2, 3],
   'STRING': 'Тише, мыши, кот на крыше'
};
localStorage.setItem('Данные', JSON.stringify(a) );

Чтение из локального хранилища

Попробуем прочитать значение по ключу из локального хранилища. Для этого используем тот же самый объект localStorage и метод getItem:

var a = localStorage.getItem('Ключ');

При выполнеии такого кода в переменную "a" будет записано значение из локального хранилища, которое хранилось там под ключом "Ключ". Есть другой способ обращения к значению:

var a = localStorage['Ключ'];

В случае сохранения данных в формате JSON, о котором писали в предыдущем параграфе, необходимо перевести данные из JSON строки в объект JavaScript:

var a = localStorage.getItem('Данные');
var b = JSON.parse(a);

- таким образом можно хранить довольно большие объекты в одном ключе, в локальном хранилище.

Удаление из локального хранилища

Чтобы удалить значение из локального хранилище, необходимо воспользоваться методом removeItem. Продемонстрируем это:

localStorage.removeItem('Ключ');

При выполнении такого кода будет удалено значение, которое соответствует ключу с названием "Ключ". Есть другой способ удаления значения:

delete localStorage['Ключ'];

Бывают случаи, когда необходимо удалить вообще все данные из локального хранилища - все ключи и значения. Для этого используется метод clear

localStorage.clear();