Какие есть хранилища в браузере и чем они отличаются?

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

localStorage:

- Хранит данные в формате ключ-значение и доступен для всех вкладок и окон того же происхождения (origin).

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

- Максимальный размер данных обычно составляет около 5-10 МБ.

localStorage.setItem('key', 'value'); 
const value = localStorage.getItem('key');

sessionStorage:

- Похож на localStorage, но данные хранятся только в пределах текущей сессии. Это означает, что данные доступны только в текущей вкладке и - будут удалены при ее закрытии.

- Размер данных также около 5-10 МБ.

sessionStorage.setItem('key', 'value'); 
const value = sessionStorage.getItem('key');

IndexedDB:

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

- Подходит для сложных веб-приложений, требующих хранения больших объемов данных.

- Работает асинхронно, что предотвращает блокировку интерфейса.

const request = indexedDB.open('myDatabase', 1); 
request.onsuccess = function(event) {
    const db = event.target.result;    // Дальнейшие операции с базой данных 
};

Cookies:

- Используются для хранения небольших объемов данных, которые могут быть отправлены на сервер с каждым HTTP-запросом. Обладают сроком действия, который можно задать.

- Чаще всего применяются для хранения информации о сеансе пользователя и аутентификации.

- Максимальный размер — около 4 КБ на cookie.

document.cookie = "key=value; expires=Fri, 31 Dec 9999 23:59:59 GMT";

Сравнение:

- localStorage и sessionStorage идеально подходят для простого хранения данных.

- IndexedDB необходим для работы с большими объемами структурированных данных.

- Cookies используются для передачи информации между клиентом и сервером, но имеют ограничения по размеру.

Понимание этих различных методов хранения данных поможет разработчикам эффективно управлять пользовательскими данными в веб-приложениях.