13. localStorage и sessionStorage

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

Основные характеристики LocalStorage

1. Объём хранилища: Обычно около 5 МБ на домен.
2. Данные сохраняются бессрочно: Они остаются в браузере до тех пор, пока пользователь не очистит их вручную или через скрипт.
3. Поддержка типов данных:
   • Хранит данные только в формате строки (string).
   • Для работы с другими типами (например, объектами или массивами) нужно использовать методы сериализации и десериализации, такие как JSON.stringify() и JSON.parse().
4. Доступно только на стороне клиента: LocalStorage не передаётся на сервер автоматически.

   Основные характеристики SessionStorage

5. Объём хранилища
   • Обычно выделяется около 5 МБ на вкладку (аналогично LocalStorage).
   • Доступный объём зависит от браузера.
6. Временная природа данных
   • Данные удаляются, как только вкладка или окно браузера закрывается.
   • Даже если пользователь обновляет страницу или переходит по ссылкам в той же вкладке, данные сохраняются до её закрытия.
7. Область видимости (scope)
   • SessionStorage привязан к конкретной вкладке и к домену, из которого данные были записаны.
   • Данные из одной вкладки недоступны в другой, даже если обе открыты на одном домене.
8. Формат данных
   • Данные хранятся в виде строк (string).
   • Для сохранения объектов или массивов нужно использовать методы JSON.stringify() и JSON.parse().
9. Доступность
   • Работает только на стороне клиента и не передаётся на сервер автоматически.
10. Безопасность
    • Как и LocalStorage, SessionStorage не шифруется. Поэтому хранение конфиденциальной информации (например, паролей) не рекомендуется.

Методы LocalStorage и SessionStorage

1. setItem(key, value)
   Сохраняет данные в хранилище.
   • key — название ключа (строка).
   • value — значение, которое нужно сохранить (строка).
     Если ключ уже существует, его значение будет перезаписано.
2. getItem(key)
   Возвращает значение, связанное с ключом.
   • Если ключ не существует, возвращает null.
3. removeItem(key)
   Удаляет из хранилища пару ключ-значение по указанному ключу.
4. clear()
   Удаляет все данные из LocalStorage.
5. key(index)
   Возвращает название ключа по индексу (нумерация ключей начинается с 0).
   • Если индекс выходит за пределы списка, возвращает null.
6. length
   Свойство, возвращающее количество элементов, сохранённых в LocalStorage.

Пример работы LocalStorage

Сохранение данных:

localStorage.setItem('username', 'JohnDoe');
localStorage.setItem('age', '30');

Чтение данных:

const username = localStorage.getItem('username'); // 'JohnDoe'
const age = localStorage.getItem('age'); // '30'

Удаление данных:

localStorage.removeItem('username');

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

localStorage.clear();

Перебор всех ключей:

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

Типы данных и JSON

Поскольку LocalStorage сохраняет данные только как строки, для хранения объектов или массивов нужно использовать JSON.stringify() и JSON.parse():

Сохранение объекта:

const user = { name: 'Alice', age: 25 };
localStorage.setItem('user', JSON.stringify(user));

Чтение объекта:

const user = JSON.parse(localStorage.getItem('user'));
console.log(user.name); // 'Alice'

Область видимости

• LocalStorage доступен только в пределах домена и протокола.
• Это значит, что данные из https://example.com не будут доступны на http://example.com или на другом поддомене sub.example.com.

Особенности использования

1. Асинхронность:
   • LocalStorage синхронен, поэтому операции с ним могут заблокировать основной поток, если данных слишком много. Используйте его для небольших данных.
2. Безопасность:
   • Данные в LocalStorage не шифруются, поэтому чувствительную информацию (например, пароли) хранить не рекомендуется.
3. Кросс-браузерность:
   • Поддерживается всеми современными браузерами, включая мобильные.

Основные сценарии использования

• Хранение пользовательских настроек (темы, язык интерфейса).
• Кэширование данных для повышения производительности (например, ответы API).
• Сохранение состояния приложения (например, данных формы).

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