Как работает storage и зачем он нужен

localStorage и sessionStorage работа с ними в браузере

Всем привет! В этом дайджесте мы уделим внимание localStorage и sessionStorage — давайте разберёмся, зачем они вообще нужны и как работают.

Зачем нужен storage?

Storage — это способ хранить данные прямо в браузере без обращения к серверу:

  • сохранять состояние интерфейса между перезагрузками страницы
  • не терять выбранные настройки пользователя
  • хранить быстрый кеш для UI
  • уменьшать нагрузку на backend

Как он работает?

Storage — это key/value хранилище в браузере: ключ — строка, значение — строка.

Если кладём объект — он превращается в JSON через JSON.stringify, обратно нужно JSON.parse.

Local vs Session

ТипЖивётГде используется
localStorage пока пользователь не очистит долгоживущие настройки, тема, избранное, состояние интерфейса
sessionStorage пока открыта вкладка временные данные внутри одной вкладки, шаги форм, фильтры

Fookie

В расширении Fookie вы можете:

  • просматривать содержимое storage
  • добавлять новые значения
  • редактировать существующие значения

Если storage содержит JSON — Fookie покажет его в виде удобной иерархии.

Экспорт и импорт storage

В Fookie вы также можете выгружать и загружать данные из localStorage и sessionStorage. Это удобно когда нужно:

  • перенести состояние интерфейса на другое устройство
  • сделать бэкап своих storage перед переустановкой системы
  • поделиться storage с коллегой
  • перенести “рабочий сетап” между браузерами
Storage становится переносимым — вы можете использовать его как конфигурацию.