Обзор средств хранения данных в браузере
Общая рекомендация из 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.