Локальное хранилище в 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();
MouseDC.ru - хостинг, виртуальный хостинг, покупка доменов, проверка доменов, WHOIS, покупка SSL сертификатов, доработка сайтов, сопровождение сайтов, разработка сайтов, техподдержка сайтов
Была ли эта статья полезна? Есть вопрос?
Cмотрите другие статьи: