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