Какие знаешь способы хранения данных на стороне браузера?

Способы хранения данных на стороне браузера

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

1. LocalStorage

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

// Сохранение
localStorage.setItem("user_theme", "dark");

// Чтение
const theme = localStorage.getItem("user_theme");

// Удаление
localStorage.removeItem("user_theme");

// Очистка всего хранилища
localStorage.clear();

Особенности:

• Лимит: ~5-10MB в зависимости от браузера
• Данные синхронные, что может заблокировать главный поток при больших объёмах
• Доступно только строковое хранение (нужна сериализация объектов)

2. SessionStorage

Похож на localStorage, но данные удаляются при закрытии вкладки. Используется для временных данных в рамках одной сессии.

sessionStorage.setItem("temp_data", JSON.stringify({id: 1}));
const data = JSON.parse(sessionStorage.getItem("temp_data"));

3. IndexedDB

Полнофункциональная асинхронная база данных в браузере. Может хранить большие объёмы данных (сотни МБ), поддерживает индексы и транзакции.

const request = indexedDB.open("myDB", 1);

request.onsuccess = (event) => {
  const db = event.target.result;
  const transaction = db.transaction("users", "readwrite");
  const store = transaction.objectStore("users");
  
  store.add({id: 1, name: "John", email: "john@example.com"});
  
  const getRequest = store.get(1);
  getRequest.onsuccess = () => {
    console.log(getRequest.result);
  };
};

Преимущества:

• Асинхронность не блокирует UI
• Большой лимит памяти
• Поддержка сложных структур данных
• Индексы для быстрого поиска

4. Cookies

Маленькие текстовые файлы, отправляющиеся с каждым HTTP-запросом. Могут быть установлены сервером или клиентом.

// Установка cookie
document.cookie = "user_id=123; path=/; max-age=" + (30 * 24 * 60 * 60);

// Чтение cookies
const cookies = document.cookie;

// Удаление cookie
document.cookie = "user_id=; max-age=0";

Особенности:

• Малый размер (до 4KB)
• Отправляются с каждым запросом
• Могут быть защищены флагами HttpOnly и Secure
• Область видимости: path и domain

5. Cache API

Предназначена для кэширования сетевых запросов, активно используется с Service Workers.

caches.open("my-cache").then((cache) => {
  cache.add("/api/users");
  cache.match("/api/users").then((response) => {
    console.log(response);
  });
});

6. WebSQL (устаревшая)

До недавних пор существовала, но теперь считается мёртвой. Вместо неё используют IndexedDB.

Сравнительная таблица

Лучшие практики

1. Используй localStorage/sessionStorage для простых данных и настроек (максимум 1-2MB)
2. IndexedDB для сложных структур и больших объёмов
3. Cookies только для данных, которые нужны серверу
4. Cache API для стратегий кэширования в Service Workers
5. Всегда обрабатывай ошибки, так как хранилище может быть заблокировано приватным режимом
6. Сериализуй объекты через JSON: JSON.stringify() и JSON.parse()
7. Никогда не сохраняй чувствительные данные (пароли, токены) в localStorage

Каждый способ имеет свою нишу в разработке, и выбор зависит от конкретной задачи.