Локальное хранилище (local storage) является очень важным объектом, предоставляющим разработчикам интерфейс, позволяющий хранить и извлекать данные, а также управлять ими непосредственно в браузере. В отличие от сессионного хранилища (session storage), локальное хранилище не подвергается деструкции после закрытия браузера, являясь идеальным инструментом хранения настроек приложений, пользовательских настроек и любых данных, требующих сохранения между сеансами. Тем не менее, возможности локального хранилища ограничиваются браузером, в котором оно было создано. Так, данные, сохраненные в Chrome, никогда не будут доступны в Firefox или Safari.

Как работает локальное хранилище

Приступая к взаимодействию с локальным хранилищем, важно знать, что данные в нем хранятся в формате JSON. Это означает, что для сохранения JavaScript-объекта, нужно сначала преобразовать его в JSON. А для того, чтобы извлечь данные - конвертировать JSON в JavaScript-объект.

Например:

const user = {
  name: "AliceDoe"
};

const userToJSON = JSON.stringify(user); // конвертируем объект в JSON

Обзор локального хранилищца в браузере

С помощью Инструментов разработчика (Developer tools) можно просматривать данные, которые находятся в локальном хранилище браузера, и взаимодействовать с ними. Для этого:

1. для Chrome нужно открыть инструменты разработчика, кликнув на правую кнопку мыши и выбрав в контекстном меню пункт “Просмотреть” (“Inspect”) или нажав сочетание горящих клавиш ⌥⌘I для Mac и F12 для Windows,
2. открыть вкладку “Application”,
3. в левом меню в разделе “Storage” выбрать “Local storage”
4. сохраненные данные локального хранилища находятся в правом окне в виде пар: ключ (key) и значение (value)

Новая запись в локальном хранилище

В локальное хранилище можно сохранить свои данные.

Разберем пример:

const user = {
  name: "AliceDoe"
};

const userToJSON = JSON.stringify(user); // конвертируем JS-объект в JSON
localStorage.setItem("user", userToJSON); // сохраняем данные

Формируется пара данных:

1. ключ (key) - “user”,
2. значение (value) - объект в формате JSON

Чтение данных из локального хранилища

При извлечении данных из локального хранилища необходимо преобразовать JSON-строку обратно в объект JavaScript:

const userJSON = localStorage.getItem("user"); // извлечение данных из локального хранилища
const userObject = JSON.parse(userJSON); // преобразование в объект JavaScript
console.log(userObject); // { name: "AliceDoe" }

Обновление данных в локальном хранилище

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

const updatedUser = {
  name: "AliceDoe",
  age: 25
};

const updatedUserJSON = JSON.stringify(updatedUser);
localStorage.setItem("user", updatedUserJSON); // перезапись

Удаление данных из локального хранилища

Наконец, для того чтобы удалить данные существует метод removeItem:

localStorage.removeItem("user"); // удаление записи "user"

В примере, приведенном выше, удаляется значение, связанное с ключом “user”

Заключение

В JavaScript локальное хранилище (local storage) является мощным и понятным инструментом сохранения данных на стороне клиента. Понимая, как создавать, читать, обновлять и удалять записи, можно организовать хранение важных данных, в том числе между сеансами браузера, что положительно повлияет на взаимодействие с пользователем. Однако, важно помнить, что локальное хранилище ограничено определенным браузером и доменом. Так же локальное хранилище не следует применять для хранения конфиденциальных данных, поскольку они не зашифрованы.

Дополнительная информация на MDN.

Спасибо за внимание

Перевод статьи Vishal Yadav “Understanding Local Storage in JavaScript”