Local Storage

Веб-хранилище

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

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

Web Storage API​

Веб-хранилище состоит из локального хранилища (localStorage) и хранилища сеансов (sessionStorage). Предоставляет способ хранения данных интуитивно понятным способом в виде пар ключ:значение. Технически в веб-хранилище можно записать только строки, но это не проблема если использовать методы класса JSON для преобразования сложных типов. В веб-хранилище не записывают методы объектов или функции, только данные.

Локальное хранилище (localStorage) уникально для каждого веб-приложения и будет одинаковым между несколькими вкладками в которых оно (веб-приложение) запущено. Данные в локальном хранилище не удаляются даже при закрытии браузера или выключении компьютера. Чтобы их удалить, необходимо использовать JavaScript.

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

ИНТЕРЕСНО

В веб-хранилище не хранят пароли, номера банковских карт и тому подбную конфиденциальную информацию. Если вредоносный скрипт получит доступ к веб-странице, то без проблем прочитает эти данные.

Локальное хранилище​

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

• setItem(key, value) - делает новую, или обновляет уже существующую запись в хранилище.

• getItem(key) - возвращает из хранилища значение с ключом key.

• removeItem(key) - удаляет из хранилища запись с ключом key.

• clear() - полностью очищает все записи в хранилище.

• length - хранит количество записей в хранилище.

Сохранение​

Используя метод setItem(key, value) можно добавить новую запись в виде пары ключ:значение.

localStorage.setItem("ui-theme", "light");localStorage.setItem("sidebar", "expanded");localStorage.setItem("notification-level", "mute");

Если необходимо сохранить что-то кроме строки, например массив или объект, необходимо преобразовать их в строку методом JSON.stringify().

const settings = {  theme: "dark",  isAuthenticated: true,  options: [1, 2, 3],};localStorage.setItem("settings", JSON.stringify(settings));

Чтение​

Метод getItem(key) позволяет прочитать из хранилища запись с ключом key. Если в хранилище нет записи с таким ключом, метод возвращает null. Когда значение это обычная строка - нет необходимости её парсить.

localStorage.setItem("ui-theme", "dark");const theme = localStorage.getItem("ui-theme");console.log(theme); // "dark"

В противном случае, необходимо распарсить значение методом JSON.parse(), чтобы получить валидные данные.

const settings = {  theme: "dark",  isAuthenticated: true,  options: [1, 2, 3],};localStorage.setItem("settings", JSON.stringify(settings));const savedSettings = localStorage.getItem("settings");const parsedSettings = JSON.parse(savedSettings);console.log(parsedSettings); // settings object

ИНТЕРЕСНО

Не забывайте использовать конструкцию try...catch с методом JSON.parse(), чтобы избежать «падения» скрипта если вдруг прочитали не валидный JSON.

Удаление​

Метод removeItem(key) удаляет из хранилища уже существующую запись с ключом key.

localStorage.setItem("ui-theme", "light");console.log(localStorage.getItem("ui-theme")); // "dark"localStorage.removeItem("ui-theme");console.log(localStorage.getItem("ui-theme")); // null

Очистка хранилища​

Операция полной очистки хранилища занятие опасное, так как может затронуть записи сделанные другими разработчиками проекта. Тем не менее, если вы хотите полностью очистить хранилище, вызовите метод clear().

localStorage.setItem("ui-theme", "light");localStorage.setItem("sidebar", "expanded");localStorage.setItem("notification-level", "mute");console.log(localStorage.getItem("ui-theme")); // "light"console.log(localStorage.getItem("sidebar")); // "expanded"console.log(localStorage.getItem("notification-level")); // "mute"localStorage.clear();console.log(localStorage.getItem("ui-theme")); // nullconsole.log(localStorage.getItem("sidebar")); // nullconsole.log(localStorage.getItem("notification-level")); // null

Сохраняем сообщение​

Создадим форму для ввода сообщения и будем сохранять его в localStorage при сабмите. Изменяйте значение текстового поля и нажимате кнопку «Save». Текст в поле вывода изменится на введенный. Перезагрузите страницу, и вы увидите все тот же текст, хотя ничего еще не вводили. При загрузке страницы мы берем из localStorage последнее сохраненное значение. Изначально такой записи в хранилище нет, поэтому будет выведена пустая строка.

Посмотреть содержимое веб-хранилища можно в инструментах разработчика на вкладке Application. Там же можно вручную удалять и добавлять записи. На практике это используется во время разработки и отладки работы приложения.

Сервис для localStorage​

Для того чтобы сократить количество повторяющегося кода при работе с веб-хранилищем, можно написать сервис с стандартными методами, например save и load. Они будут абстрагировать повторяющийся код проверки ошибок парса и тому подобную рутину.

storage.js

const save = (key, value) => {  try {    const serializedState = JSON.stringify(value);    localStorage.setItem(key, serializedState);  } catch (error) {    console.error("Set state error: ", error.message);  }};const load = key => {  try {    const serializedState = localStorage.getItem(key);    return serializedState === null ? undefined : JSON.parse(serializedState);  } catch (error) {    console.error("Get state error: ", error.message);  }};export default {  save,  load,};

Теперь мы можем безопасно добавлять и читать записи из локального хранилище. Попробуйте самостоятельно дописать метод remove(key) для удаления записи, аналогично load(key) и save(key, value).