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).
Last updated