Для чего нужен localStorage: как работать с веб-хранилищем

В нашей сегодняшней статье мы разберемся, что такое localStorage. LocalStorage — это свойство, открывающее доступ к специальному объекту Storage (хранилище). Его используют для получения информации из локального хранилища. Данные хранятся там неограниченный период и могут быть удалены только при помощи JavaScript.

Эти данные характерны для протокола веб-страницы: это ключи и значения в формате строк (даже целочисленные значения ключей будут преобразовываться в строки).

Информация в localStorage не стирается после обновления страницы или когда браузер был закрыт и запущен снова.

Проще говоря, localStorage – это объект в браузере, которым мы можем воспользоваться. На языке JS он представляет собой свойства глобального объекта браузера (то есть — window, окна).

У него есть аналог —  sessionStorage, который отличается только тем, что в нем хранятся данные для одной вкладки (значения сотрутся после ее закрытия).

Синтаксис выглядит вот так:

myStorage = window.localStorage;

Из исключений свойства можно отметить SecurityError. Это означает, что запрос к веб-хранилищу выполняется без разрешения или источник для хранения не считается верной комбинацией схемы, хоста и порта.

Как работать с localStorage

Можно использовать такие методы и свойства:

• key(index) – извлечь ключ на определенной позиции;
Онлайн-курс "Продуктова аналітика" від robot_dreams.
Навчіться досліджувати та аналізувати логіку поведінки користувачів. Дізнайтеся, як створювати аналітичну систему з нуля, виводити новий продукт на ринок та прогнозувати показники. .
Детальніше
• setItem(key, value) – записать ключ и значение объекта;
• removeItem(key) – стереть данные с указанным ключом;
• getItem(key) – считать информацию по заданному ключу;
• clear() – стереть всю информацию;
• length – получить значение количества информации в объекте.

Например, попробуем добавить данные с помощью Storage.setItem():

localStorage.setItem('Пример', '1');

Для считывания данных есть следующая опция:

let kot = localStorage.getItem('Пример');

Удалить данные можно с помощью функции removeItem, которая вернет значение undefined:

localStorage.removeItem('Пример');

Если же вы хотите сразу избавиться от всех записей и полностью очистить свойство, то можно применить следующий способ:

localStorage.clear();

Обратите внимание, что для браузеров поддержка localStorage начинается с их определенной версии.

Ключи и особенности работы

В том, что такое localStorage, мы разобрались. Теперь нужно понять, для чего он нужен и как с ним можно работать. Это свойство хранит данные между сессиями пользователей. Можно придумать огромное количество вещей для хранения в браузере: например, сохранение позиции при просмотре видео, ФИО, адрес электронного ящика, которые не хочется набирать в новых полях постоянно.

Работа с localStorage в основном представляет собой классический набор действий с объектом JavaScript.

Особенности localStorage:

• объект для всех вкладок и окон в пределах одного источника является единым;
Онлайн-курс "Гранти для кіно, музики й творчіх проєктів" від Skvot.
Як подавати заявки на грант, щоб серед усіх проєктів запам’ятали та обрали твій? Розбираємось за 16 занять з засновницею менторської програми для українських артистів. .
Детальніше тут
• данные не обладают сроком давности, поэтому хранятся все время.

Это означает, что достаточно находиться в одном домене или протоколе, чтобы получать одни и те же данные. При этом URL может меняться.

Объект доступен всем окнам, а значит, если мы запишем значение в одном окне, то они станут доступны и из другого — это очень удобно.

Данные в localStorage можно записывать и получать так же, как в обычных объектах JS. Но это не рекомендуется, потому что в некоторых случаях могут не пройти чтение и запись как свойства объекта. Также при модификации данных может не сработать событие storage.

Методы работы с localStorage позволяют считывать, записывать и удалять данные. Но как получить все значения и ключи, хранящиеся в свойстве? Так как они не итерируемые, то перебрать их в цикле невозможно. Но мы можем пройти по ним, как по стандартному массиву данных:

for(let i=0; i<localStorage.length; i++) 
{
  let key = localStorage.key(i);
  alert(`${key}: ${localStorage.getItem(key)}`);
}

Другой способ — обращение к свойству, как к обычному объекту, с использованием цикла. В таком случае будут перебираться ключи, но и отобразятся и несколько встроенных полей:

for(let key in localStorage) 
{  alert(key); }

Такой фрагмент кода покажет ряд встроенных свойств, среди которых getItem, setItem. Чтобы избежать этого, можно воспользоваться фильтрацией данных. Она пропустит эти ключи:

for(let key in localStorage) 
{
  if (!localStorage.hasOwnProperty(key)) 
{ continue; }
  alert(`${key}: ${localStorage.getItem(key)}`);
}

Еще один вариант получения ключей — Object.keys. Затем уже можно будет отобразить их значения в цикле:

let keys = Object.keys(localStorage);
for(let key of keys) 
{  alert(`${key}: ${localStorage.getItem(key)}`); }

Последний вариант является рабочим, потому что функция возвращает только те ключи, которые принадлежат объекту, при этом прототип полностью игнорируется.

LocalStorage или Cookies?

Давайте разберемся, для чего нам localStorage, когда у нас уже есть Cookies:

1. В отличие от Cookies, объекты localStorage не отправляют данные при каждом запросе — это позволяет хранить гораздо большие объемы информации. Обычно для браузеров минимальный объем таких данных — 2 МБ (но его можно изменить его в настройках приложения).
2. Сервер не сможет манипулировать объектами хранилища, используя HTTP-заголовки. Все действия с объектами осуществляются с помощью кода, написанного на JavaScript.
3. При работе в JavaScript гораздо удобнее пользоваться localStorage. Плюс, значения Cookies имеют временный характер, а значит, по истечению определенного периода или по завершению сеанса они будут удалены.
4. Важным отличием является и политика конфиденциальности данных. Для пользователей Евросоюза сайты должны выводить уведомление, что они используют Cookies. На локальные хранилища этот закон не распространяется, а значит, и разрешение не требуется.

Примеры работы с localStorage

В качестве примера можно открыть вкладку с localStorage в вашем браузере, а затем записывать и извлекать из него данные вручную.

Код для JS-файла будет выглядеть вот так:

//Добавляем или меняем значение ключа и параметра:
localStorage.setItem('Ключ', 'Значение');
//Отображаем его в консоли:
var localValue = localStorage.getItem('Ключ');
console.log(localValue); // Получаем на экране "Значение"
//удаляем по заданному ключу:
localStorage.removeItem('Ключ');
//очищаем все хранилище
localStorage.clear()

LocalStorage может хорошо работать с вложенными структурами, при желании в него можно записать целый объект.

Не стоит забывать, что браузеры выделяют до 5 Мб для хранения свойства. Если лимит будет превышен, то получим исключение QUOTA_EXCEEDED_ERR. Оно поможет проверить вместимость хранилища. Для этого воспользуемся таким фрагментом кода:

try {
  localStorage.setItem('Ключ', 'Значение');
} catch (e) {
  if (e == QUOTA_EXCEEDED_ERR) {
   alert('Превышен лимит');
  }
}

Смело используйте localStorage в самых разных проектах. У этой технологии хорошая стандартизация и поддержка, а еще важно, что со временем она развивается и улучшается.