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

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

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

localStorage

Постоянное хранилище, данные сохраняются после закрытия браузера:

// Сохранение данных
localStorage.setItem('username', 'john_doe');
localStorage.setItem('preferences', JSON.stringify({ 
  theme: 'dark', 
  language: 'ru' 
}));

// Получение данных
const username = localStorage.getItem('username');
const preferences = JSON.parse(localStorage.getItem('preferences'));

// Удаление данных
localStorage.removeItem('username');
localStorage.clear(); // очистить всё

// Проверка наличия
if (localStorage.getItem('token')) {
  console.log('Пользователь авторизован');
}

Характеристики:

• Объём: около 5-10 МБ
• Доступ: синхронный
• Время жизни: постоянное
• Область видимости: один домен

sessionStorage

Временное хранилище, очищается при закрытии вкладки/браузера:

// API идентичен localStorage
sessionStorage.setItem('tempData', 'value');
const data = sessionStorage.getItem('tempData');
sessionStorage.removeItem('tempData');

Характеристики:

• Объём: около 5-10 МБ
• Доступ: синхронный
• Время жизни: одна сессия
• Область видимости: одна вкладка

Cookies

Малые данные, отправляются на сервер с каждым запросом:

// Установка cookie
document.cookie = 'username=john; path=/; max-age=86400'; // 24 часа
document.cookie = 'sessionId=abc123; path=/; SameSite=Strict; Secure';

// Получение всех cookies
const allCookies = document.cookie; // строка: "key1=value1; key2=value2"

// Функция для удобного доступа
function getCookie(name) {
  const nameEQ = name + '=';
  const cookies = document.cookie.split(';');
  for (let cookie of cookies) {
    cookie = cookie.trim();
    if (cookie.indexOf(nameEQ) === 0) {
      return cookie.substring(nameEQ.length);
    }
  }
  return null;
}

const username = getCookie('username');

Характеристики:

• Объём: 4 КБ на cookie
• Доступ: синхронный
• Отправляются на сервер: да
• Флаги безопасности: HttpOnly, Secure, SameSite

IndexedDB

Мощная база данных для больших объёмов данных:

// Открытие БД
const request = indexedDB.open('myDatabase', 1);

request.onupgradeneeded = (event) => {
  const db = event.target.result;
  const objectStore = db.createObjectStore('users', { keyPath: 'id' });
  objectStore.createIndex('email', 'email', { unique: true });
};

request.onsuccess = (event) => {
  const db = event.target.result;
  
  // Добавление данных
  const transaction = db.transaction(['users'], 'readwrite');
  const objectStore = transaction.objectStore('users');
  objectStore.add({ id: 1, name: 'John', email: 'john@example.com' });
  
  // Получение данных
  const getRequest = objectStore.get(1);
  getRequest.onsuccess = () => {
    console.log(getRequest.result);
  };
};

Характеристики:

• Объём: 50+ МБ
• Доступ: асинхронный
• Сложность: высокая
• Возможности: индексы, запросы, транзакции

Service Worker Cache API

Кэширование сетевых ресурсов:

// В Service Worker
self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open('v1').then((cache) => {
      return cache.addAll([
        '/index.html',
        '/styles.css',
        '/app.js'
      ]);
    })
  );
});

// Использование кэша
self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request).then((response) => {
      return response || fetch(event.request);
    })
  );
});

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

Рекомендации

• localStorage — для простых пользовательских настроек
• sessionStorage — для временных данных одной сессии
• cookies — для авторизационных токенов (с флагом HttpOnly)
• IndexedDB — для сложных данных и оффлайн функциональности
• Service Worker Cache — для кэширования ресурсов в PWA

Выбор способа зависит от объёма данных, времени жизни и требований безопасности.