localStorage, sessionStorage, cookies, IndexedDB

Это все способы хранения данных в браузере, но с разными особенностями по объему, сроку жизни и доступу.

---

1️⃣ localStorage

• Хранение данных на стороне клиента постоянно (пока не удалят вручную).

• Доступно только для скриптов на том же домене.

• Ограничение объема: ~5–10 МБ.

• Пример:

localStorage.setItem("token", "123abc");
let token = localStorage.getItem("token");

---

2️⃣ sessionStorage

• Хранение данных только на время сессии (пока открыта вкладка).

• Данные удаляются при закрытии вкладки.

• Ограничение объема: ~5–10 МБ.

• Пример:

sessionStorage.setItem("sessionId", "xyz789");
let sessionId = sessionStorage.getItem("sessionId");

---

3️⃣ Cookies

• Малый объем (~4 КБ).

• Отправляются на сервер с каждым HTTP-запросом (если не установлен флаг HttpOnly).

• Можно задать срок жизни или сделать сессионными.

• Пример:

document.cookie = "user=John; expires=Fri, 31 Dec 2025 23:59:59 GMT; path=/";

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

• Используются для сессий, авторизации.

• Могут быть защищены через HttpOnly, Secure и SameSite.

---

4️⃣ IndexedDB

• Клиентская база данных в браузере.

• Поддерживает структурированные объекты, транзакции, индексы.

• Объем: десятки мегабайт и больше.

• Используется для сложного хранения данных (например, оффлайн-приложения, кеш больших данных).

• Пример:

let request = indexedDB.open("MyDatabase", 1);
request.onsuccess = function(event) {
  let db = event.target.result;
  let tx = db.transaction("users", "readwrite");
  let store = tx.objectStore("users");
  store.add({id: 1, name: "Alice"});
};

---

Кратко о различиях

Хранилище	Время жизни	Объем	Доступ к серверу	Особенности
localStorage	постоянный	~5–10 МБ	нет	только для скриптов
sessionStorage	сессия (вкладка)	~5–10 МБ	нет	удаляется при закрытии вкладки
cookies	зависит от expiry	~4 КБ	да	для авторизации и сессий
IndexedDB	постоянный	десятки МБ+	нет	полноценная база данных