В каком виде хранится информация в Local Storage

1️⃣ Как кратко ответить

Информация в Local Storage хранится в виде пар "ключ-значение", где и ключ, и значение представлены в виде строк.

2️⃣ Подробное объяснение темы

Local Storage — это механизм веб-хранилища, который позволяет сохранять данные в браузере пользователя. В отличие от cookies, данные в Local Storage не отправляются на сервер с каждым HTTP-запросом, что делает его более эффективным для хранения больших объемов данных на стороне клиента.

Local Storage хранит данные в виде пар "ключ-значение". Оба элемента пары — и ключ, и значение — должны быть строками. Это значит, что если вы хотите сохранить объект или число, их необходимо сначала преобразовать в строку, например, с помощью JSON.stringify().

Пример использования Local Storage

Рассмотрим пример, где мы сохраняем и извлекаем данные из Local Storage:

// Сохранение данных в Local Storage
const user = {
  name: "John Doe",
  age: 30
};
​
// Преобразуем объект в строку JSON
const userString = JSON.stringify(user);
​
// Сохраняем строку в Local Storage под ключом "user"
localStorage.setItem("user", userString);
​
// Извлечение данных из Local Storage
// Получаем строку из Local Storage по ключу "user"
const retrievedUserString = localStorage.getItem("user");
​
// Преобразуем строку JSON обратно в объект
const retrievedUser = JSON.parse(retrievedUserString);
​
// Выводим объект в консоль
console.log(retrievedUser);

Объяснение кода:

1. Создание объекта user:

   • Создаем объект user с двумя свойствами: name и age.

2. Преобразование объекта в строку:

   • Используем JSON.stringify(user), чтобы преобразовать объект user в строку JSON. Это необходимо, так как Local Storage может хранить только строки.

3. Сохранение строки в Local Storage:

   • Метод localStorage.setItem("user", userString) сохраняет строку userString в Local Storage под ключом "user".

4. Извлечение строки из Local Storage:

   • Метод localStorage.getItem("user") извлекает строку, сохраненную под ключом "user".

5. Преобразование строки обратно в объект:

   • Используем JSON.parse(retrievedUserString), чтобы преобразовать строку JSON обратно в объект.

6. Вывод объекта в консоль:

   • Выводим объект retrievedUser в консоль, чтобы убедиться, что данные были успешно сохранены и извлечены.

Зачем это нужно

Local Storage полезен для хранения данных, которые должны сохраняться между сессиями браузера. Это может быть полезно для сохранения пользовательских настроек, данных форм или состояния приложения. Данные в Local Storage сохраняются даже после закрытия браузера, что делает его удобным для долговременного хранения информации на стороне клиента.