Хранение данных в локальном хранилище localStorage

Дата публикации: 2017-02-21

От автора: приветствую вас, друзья. В предыдущей статье мы с вами познакомились с плагином jQuery Cookie, который предоставляет простой интерфейс для работы с куками и, соответственно, позволяет хранить данные в куках. В этой статье мы узнаем еще об одном способе хранения данных, речь идет о локальном хранилище localStorage.

Итак, объект localStorage является глобальным объектом, в котором нам доступно целых 5 Мб места, т.е. записать туда мы можем очень-очень много разных данных. При этом эти данные будут храниться сколь угодно долго. Это очень удобно.

Для работы с объектом нам предлагается некоторый набор методов:

setItem() — запись в хранилище;

getItem() — получение данных их localStorage;

removeItem() — удаление конкретных данных;

clear() — очистка хранилища полностью.

Работа с представленными методами очень похожа на работу с куками в предыдущей статье. Давайте попробуем что-то записать в хранилище.

localStorage.setItem('name', 'Andrey');

1	localStorage.setItem('name', 'Andrey');

Теперь посмотрим в консоли на содержимое хранилища:

Хранение данных в локальном хранилище localStorage

Как видим, в хранилище записалась переменная (ключ, свойство) name с нужным значением. Без проблем можем записать еще что-то:

localStorage.setItem('name', 'Andrey');
localStorage.setItem('name2', 'John');

1 2	localStorage.setItem('name', 'Andrey'); localStorage.setItem('name2', 'John');

Теперь мы записали в объект localStorage уже пару свойств. Давайте распечатаем сам объект и убедимся, что свойства там есть:

console.log(localStorage);

1	console.log(localStorage);

Хранение данных в локальном хранилище localStorage

Получить данные из хранилища можно несколькими способами. Во-первых, для получения данных можно использовать метод getItem(), передавая в качестве параметра нужный ключ.

console.log( localStorage.getItem('name') );

1	console.log( localStorage.getItem('name') );

Также можем использовать синтаксис работы с массивами, обращаясь вот так:

console.log( localStorage['name'] );

1	console.log( localStorage['name'] );

Ну и можем обратиться к свойству объекта следующим образом:

console.log( localStorage.name );

1	console.log( localStorage.name );

Все три строки кода выведут одно и то же значение.

Хранение данных в локальном хранилище localStorage

Как видим, ничего сложного в сохранении данных нет. Если какие-либо данные нам не нужны, мы можем удалить их по ключу, обратившись к методу removeItem().

localStorage.removeItem('name');

1	localStorage.removeItem('name');

Если же нам нужно полностью очистить хранилище, тогда на помощь приходит метод clear:

localStorage.clear();

1	localStorage.clear();

После этой команды хранилище станет абсолютно пустым, как в начале работы:

Хранение данных в локальном хранилище localStorage

На этом мы завершим данную статью. Исходники к статье вы можете скачать по ссылке. Больше о JavaScript и jQuery вы можете узнать из наших уроков или курса. Удачи!

Метки: JavaScript