Хранилища в браузере: localStorage, sessionStorage, IndexedDB

В браузере существует несколько видов встроенных хранилищ данных, которые можно использовать для сохранения состояния пользователя, кэша, настроек и т.п.

Основные типы хранилищ

Cookie

• Позволяют передавать данные между клиентом и сервером
• Используются для авторизации, сессий, персонализации
• Передаются в каждом HTTP-запросе, поэтому должны быть компактными
• Настраиваются через Set-Cookie заголовок или document.cookie

document.cookie = "theme=dark; path=/; max-age=3600";

LocalStorage

• Подходит для долгосрочного хранения данных (тема, токены, настройки)
• Доступен только на клиенте
• Переживает перезапуск браузера

localStorage.setItem("theme", "dark");
const theme = localStorage.getItem("theme");
localStorage.removeItem("theme");

SessionStorage

• Аналогичен localStorage, но живёт только в рамках одной вкладки
• После закрытия вкладки — данные удаляются

sessionStorage.setItem("step", "2");
sessionStorage.getItem("step");

IndexedDB

• Асинхронная база данных в браузере (key-value + индексы)
• Позволяет хранить структурированные объекты, даже файлы
• Подходит для offline-first приложений, PWA, больших данных

const db = indexedDB.open("MyDB", 1);

Использовать проще через обёртки:

• idb
• Dexie.js

Когда использовать что?

Вывод

• Используйте cookie для передачи между клиентом и сервером
• Используйте localStorage для постоянных данных на клиенте
• Используйте sessionStorage для временных, одноразовых данных
• Используйте IndexedDB для сложного и большого хранения