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

Общая рекомендация из Storage for the web по хранению ресурсов:

• Для файлов и сетевых ресурсов, необходимых для загрузки приложения, используйте Cache Storage API (часть service-воркеров).
• Для других данных используйте IndexedDB (используя пакет idb). Стоит отметить, что IndexedDB имеет более сложный API в сравнении с Web Storage API.

IndexedDB и Cache Storage API поддерживаются всеми современными браузерами. Они оба асинхронны и не блокируют основной поток. Они доступны из объекта window, web-воркеров и service-воркеров.

IndexedDB

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

import { openDB } from 'https://unpkg.com/idb?module';

const db = await openDB('myStore', 1, {
upgrade(database) {
    database.createObjectStore('myTable');
},
});
const table = db.transaction('myTable', 'readwrite').objectStore('myTable');
await table.put(7, 'id');
console.log(await table.get('id'));

Web Storage API

Для случаев записи данных малого размера можно использовать LocalStorage или SessionStorage. Это хранилища типа ключ-значение. Имеют одинаковое API, которое блокируют основной поток (страница зависает на время выполения операций). Могут хранить только строковые данные и недоступны в web-воркерах и service-воркерах. Отличаются между собой тем, что в SessionStorage данные пропадают при закрытии страницы, но сохраняются при перезагрузке страницы. LocalStorage не имеет таких ограничений.

// у sessionStorage идентичные методы
localStorage.setItem('id', 7);
localStorage.getItem('id');
localStorage.removeItem('user');

Cookies

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

// Create
document.cookie = "user_name=Ire Aderinokun";  
document.cookie = "user_age=25;max-age=31536000;secure";

// Read (All)
console.log( document.cookie );

// Update
document.cookie = "user_age=24;max-age=31536000;secure"; 

// Delete
document.cookie = "user_name=Ire Aderinokun;expires=Thu, 01 Jan 1970 00:00:01 GMT"; 

Файловые API

File System Access API — прежнее название Native File System API. Позволяет разработчикам создавать web- приложения, которые взаимодействуют с файлами на локальном устройстве пользователя, такие как фото-, видео-, текстовые редакторы. Пример текстового редактора из статьи. После того, как пользователь предоставляет доступ к веб-приложению, этот API позволяет читать или сохранять изменения непосредственно в файлах и папках на устройстве пользователя. Помимо чтения и записи файлов, есть возможность открывать каталог и просматривать его содержимое.

File System API и FileWriter API предоставляют методы для чтения и записи файлов в изолированную файловую систему. Явлется инициативой и поддерживается в Chromium-based браузерах. Не рекомендуется к использованию.

WebSQL (deprecated)

WebSQL — попытка перенести SQL в web, W3C отказался от развития в пользу IndexedDB.

Однако стоит отметить проект Absurd SQL. Абсурд потому что база данных SQLite в базе данных IndexedDB. Под капотом это расширение проекта sql.js для сохранения в IndexedDB.

---

• Client-side storage
• Хранение данных в браузере
• Обзор средств хранения данных на клиентской стороне