JavaScript Storage API

Введение в Storage API

В современной веб-разработке эффективное управление данными имеет ключевое значение. Web Storage API в JavaScript предоставляет простой синхронный способ хранить пары ключ/значение прямо в браузере — без обращения к серверу. Это наиболее распространённый инструмент для сохранения пользовательских настроек, кэширования небольших фрагментов данных и поддержания состояния интерфейса между перезагрузками страницы.

В этом руководстве рассматриваются два объекта хранилища, предоставляемых API, — localStorage и sessionStorage — а также полный набор методов, способы хранения объектов, реакция на изменения в других вкладках и типичные подводные камни. Оба объекта имеют одинаковый интерфейс (Storage); единственное различие заключается в времени жизни данных и области их доступности.

Поскольку Web Storage никогда не отправляется на сервер, он не подходит для хранения токенов аутентификации, которые нужны бэкенду — для этого предназначены cookies.

Интерфейс Storage

Каждое значение в Web Storage является string. Оба объекта — localStorage и sessionStorage — предоставляют одни и те же пять методов плюс свойство length:

Примеры ниже используют localStorage, однако каждый метод работает идентично и с sessionStorage.

Понимание localStorage

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

Сохранение данных в localStorage

Чтобы сохранить данные, используйте метод setItem с ключом и значением:

// Storing data in localStorage
localStorage.setItem('username', 'JohnDoe');

Оба аргумента приводятся к string. Вызов setItem('count', 5) фактически сохраняет string "5", поэтому не забывайте выполнять обратное преобразование при чтении.

Получение данных из localStorage

Для чтения значения используйте getItem. Если ключ не существует, вы получите null (а не undefined):

// Retrieving data from localStorage
const username = localStorage.getItem('username');
console.log(username);                 // "JohnDoe"
console.log(localStorage.getItem('missing')); // null

Удаление данных из localStorage

Удалите один ключ с помощью removeItem или очистите всё для данного источника с помощью clear:

// Remove one key
localStorage.removeItem('username');

// Remove every key for this origin
localStorage.clear();

clear() затрагивает только текущий источник (схема + хост + порт) и никогда не трогает данные другого сайта.

Хранение объектов: JSON.stringify и JSON.parse

Поскольку значения хранилища должны быть string, объект нельзя сохранить напрямую — setItem('user', {name: 'Ann'}) запишет бесполезную string "[object Object]". Используйте JSON.stringify при сохранении и JSON.parse при чтении:

const user = { name: 'Ann', theme: 'dark', visits: 3 };

// Save: serialize the object to a JSON string
localStorage.setItem('user', JSON.stringify(user));

// Load: parse the string back into an object
const restored = JSON.parse(localStorage.getItem('user'));
console.log(restored.theme); // "dark"
console.log(restored.visits + 1); // 4

Подробнее о сериализации — в Работе с JSON, а основы объектов — в JavaScript Objects.

Перебор сохранённых ключей

Используйте length вместе с key(index) для перебора всего, что хранится для данного источника:

localStorage.setItem('a', '1');
localStorage.setItem('b', '2');

for (let i = 0; i < localStorage.length; i++) {
  const name = localStorage.key(i);
  console.log(`${name} = ${localStorage.getItem(name)}`);
}
// a = 1
// b = 2

Использование sessionStorage

sessionStorage имеет идентичный API, но более короткое время жизни — в рамках вкладки. Данные очищаются по завершении сессии страницы, то есть при закрытии вкладки. Открытие того же сайта в другой вкладке создаёт отдельный sessionStorage, поэтому две вкладки никогда не видят данные друг друга. Это делает его идеальным для данных, которые не должны «утекать» между вкладками, — например, для прогресса многошагового мастера.

// Store, read, and remove — same methods as localStorage
sessionStorage.setItem('sessionName', 'Session1');
console.log(sessionStorage.getItem('sessionName')); // "Session1"
sessionStorage.removeItem('sessionName');

Реакция на изменения в других вкладках

Когда localStorage изменяется в одной вкладке, браузер генерирует событие storage во всех остальных вкладках того же источника (но не в той вкладке, которая внесла изменение). Это позволяет синхронизировать несколько вкладок — например, одновременно выходить из системы везде:

window.addEventListener('storage', (event) => {
  // event.key, event.oldValue, event.newValue, event.url
  if (event.key === 'theme') {
    console.log('Theme changed in another tab to', event.newValue);
  }
});

Примечание: событие storage срабатывает только для localStorage (общего для вкладок), но не для sessionStorage.

Обработка ошибок и ограничений

При записи может возникнуть QuotaExceededError, если превышен лимит ~5 МБ; кроме того, хранилище может быть полностью недоступно в режиме приватного просмотра или при отключённых cookies. Оборачивайте операции записи в try...catch и проверяйте наличие API перед его использованием:

function safeSet(key, value) {
  try {
    localStorage.setItem(key, value);
    return true;
  } catch (err) {
    // QuotaExceededError, or storage blocked by the browser
    console.warn('Storage write failed:', err.name);
    return false;
  }
}

console.log(safeSet('theme', 'dark')); // true (when storage is available)

Лучшие практики использования Web Storage

• Безопасность: всегда оценивайте последствия хранения чувствительных данных в браузере. Не храните конфиденциальную информацию — пароли или персональные идентификационные данные.
• Ограничения хранилища: учитывайте ограничения ёмкости (как правило, около 5 МБ) и обрабатывайте ситуации, когда хранилище может быть заполнено.
• Совместимость с браузерами: убедитесь, что ваш код обрабатывает случаи, когда браузер может не поддерживать Storage API.
• Только string: Web Storage принимает только string. Используйте JSON.stringify() для сохранения объектов и JSON.parse() для их восстановления.
• Синхронизация между вкладками: используйте StorageEvent для прослушивания изменений, внесённых в других вкладках, и поддержания синхронизации данных.

Полный пример для закрепления материала

Эта демонстрация показывает, как использовать Web Storage API, включая localStorage и sessionStorage. Вы можете нажимать кнопки для сохранения, получения и удаления данных из хранилища:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Storage API Interactive Demo</title>
  </head>
  <body>
    <h2>localStorage and sessionStorage Demo</h2>
    <div style="display: flex; gap: 10px">
      <button onclick="storeInLocal()">Store in localStorage</button>
      <button onclick="retrieveFromLocal()">Retrieve from localStorage</button>
      <button onclick="removeFromLocal()">Remove from localStorage</button>
    </div>

    <div style="margin: 20px 0" id="localStorageResult"></div>

    <div style="display: flex; gap: 10px; margin-top: 10px">
      <button onclick="storeInSession()">Store in sessionStorage</button>
      <button onclick="retrieveFromSession()">
        Retrieve from sessionStorage
      </button>
      <button onclick="removeFromSession()">Remove from sessionStorage</button>
    </div>

    <div style="margin-top: 20px" id="sessionStorageResult"></div>

    <script>
      function storeInLocal() {
        localStorage.setItem("demo", "Hi from LocalStorage!");
        document.getElementById("localStorageResult").textContent =
          "Stored in localStorage: " + localStorage.getItem("demo");
      }

      function retrieveFromLocal() {
        const value = localStorage.getItem("demo") || "Nothing in localStorage";
        document.getElementById("localStorageResult").textContent =
          "Retrieved from localStorage: " + value;
      }

      function removeFromLocal() {
        localStorage.removeItem("demo");
        document.getElementById("localStorageResult").textContent =
          "Item removed from localStorage.";
      }

      function storeInSession() {
        sessionStorage.setItem("demo", "Hi from SessionStorage!");
        document.getElementById("sessionStorageResult").textContent =
          "Stored in sessionStorage: " + sessionStorage.getItem("demo");
      }

      function retrieveFromSession() {
        const value =
          sessionStorage.getItem("demo") || "Nothing in sessionStorage";
        document.getElementById("sessionStorageResult").textContent =
          "Retrieved from sessionStorage: " + value;
      }

      function removeFromSession() {
        sessionStorage.removeItem("demo");
        document.getElementById("sessionStorageResult").textContent =
          "Item removed from sessionStorage.";
      }
    </script>
  </body>
</html>

• LocalStorage: данные, сохранённые здесь, остаются даже после закрытия и повторного открытия браузера, что делает его идеальным для хранения пользовательских настроек или других долгосрочных данных.
• SessionStorage: аналогичен localStorage, однако данные очищаются по окончании сессии (например, при закрытии браузера).

Нажимая различные кнопки, вы можете видеть, как данные добавляются в каждый тип хранилища, извлекаются из него и удаляются. Результаты отображаются непосредственно под кнопками, давая мгновенную обратную связь о происходящем с данными. Эта интерактивная установка помогает визуализировать и понять, как веб-приложения могут запоминать данные между перезагрузками страницы или сессиями браузера.

Помимо взаимодействия с операциями хранилища через кнопки в этой демонстрации, вы также можете просматривать хранимые данные и управлять ими непосредственно в браузере. Откройте инструменты разработчика, перейдите в раздел Application и найдите вкладку Storage. Там вы увидите записи localStorage и sessionStorage.

Этот визуальный инструмент позволяет в реальном времени видеть результаты своих действий (таких как сохранение и удаление данных) и даёт практический способ изучить работу веб-хранилища в браузерах.

Заключение

JavaScript Storage API предоставляет надёжный и удобный способ управления данными в браузере. Понимая и используя localStorage и sessionStorage, разработчики могут существенно улучшить пользовательский опыт своих веб-приложений. Всегда учитывайте вопросы безопасности и ограничения хранилища, чтобы ваши приложения были надёжными и удобными. С помощью этих инструментов можно создавать механизмы сохранения состояния и управления данными, которые являются ключевыми для современных веб-приложений.

Практика