Обзор способов хранения данных "в браузере"

  • Куки (Cookies)
  • Веб хранилище (Web Storage)
  • Indexed Database (IndexedDB)
  • WebSQL Database
  • Cache
  • FileSystem API

Куки (Cookies)

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

Веб хранилище (Web Storage API)

Также известное как DOM Storage, это ограниченное по размеру хранилище типа ключ/значение, в котором данные можно хранить только в виде строк. Веб хранилище может быть двух типов (оба доступны в Window):

  • Сессионное (sessionStorage) — доступно в течение одной сессии (пока браузер открыт);
  • Локальное (localStorage) — доступно даже если перезапустить браузер.

Каждый браузер имеет своё ограничение размера для обоих типов. В основном, оно колеблится в районе 2,5 – 5 Mb.

Для работы с хранилищем доступны следующие методы:

  • setItem — добавить или обновить значение;
  • getItem — получить значение;
  • removeItem — удалить ключ/значение;
  • clear — очистить хранилище.

Примечание: На событие изменения хранилища можно подписаться: window.addEventListener('storage', event => {});. Подробнее в StorageEvent.

Indexed Database (IndexedDB)

IndexedDB — объектно-ориентированная база данных, для работы с большими объёмами информации. Высокая скорость поиска обеспечивается возможностью индексировать поля.

WebSQL Database

⚠️ Deprecated с 18 ноября 2010 года.

Cache

Предоставляет механизм хранения кешированных пар объектов Request / Response, например, как часть жизненного цикла ServiceWorker. Основное применение — кеширование ресурсов для офлайн работы веб-приложение.

File and Directory Entries API

С помощью этого API можно управлять (read, write, and create) файлами и дерикториями в виртуальной (sandboxed) файловой системе.

⚠️ Не является стандартом, и мало где поддерживается.

results matching ""

    No results matching ""