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

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

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

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

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

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

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

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

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

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

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

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

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

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

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

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

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

console.log(localStorage);

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

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

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

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

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

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

console.log( localStorage.name );

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

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

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

localStorage.removeItem('name');

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

localStorage.clear();

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

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

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

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее
Самые свежие новости IT и веб-разработки на нашем Telegram-канале

JavaScript&jQuery с нуля до профи

Пройдите пошаговый видеокурс по JavaScript&jQuery

Научиться

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree