Хранение данных и управление ими в браузере — также известное как хранилище на стороне клиента — полезно, когда нет необходимости или целесообразности отправлять их на
Ситуации для хранения и управления данными в браузере включают в себя:
сохранение состояния клиентского приложения — например, текущий экран, введенные данные, пользовательские настройки и т. д.
утилиты, которые получают доступ к локальным данным или файлам и предъявляют строгие требования к конфиденциальности
прогрессивные
Вот десять вариантов хранения данных браузера:
переменные JavaScript
DOM node storage
ИндекседБД
API кеша (не используйте AppCache!)
API доступа к файловой системе
API файлов и каталогов
печенье
window.name
WebSQL
В этой статье исследуются эти десять различных способов хранения данных в браузере, охватывая их ограничения, плюсы и минусы, а также лучшие способы использования каждого метода.
Прежде чем мы рассмотрим варианты, краткое примечание о сохранении данных...
Сохранение данных
Как правило, данные, которые вы храните, будут:
постоянный: он остается до тех пор, пока ваш код не решит его удалить, или
volatile: остается до окончания сеанса браузера, обычно когда пользователь закрывает вкладку
Реальность более тонкая.
Постоянные данные могут быть заблокированы или удалены пользователем, операционной системой, браузером или плагинами в любой момент. Браузер может принять решение об удалении старых или больших элементов по мере приближения к емкости, выделенной для этого типа хранилища.
Браузеры также записывают состояние страницы. Вы можете уйти с сайта и щелкнуть назад или закрыть и снова открыть вкладку; страница должна выглядеть идентично. Переменные и данные, считающиеся только сеансовыми,
1. Переменные JavaScript
метрика комментарий
емкость нет строгих ограничений, но возможны замедления или сбои браузера при заполнении памяти
скорость чтения/записи самый быстрый вариант
упорство плохо: данные стираются при обновлении браузера
Сохранение состояния в переменных JavaScript — самый быстрый и простой вариант. Я уверен, что вам не нужен пример, но...
const
a = 1,
b = 'two’,
state = {
msg: 'Hello’,
name: 'Craig’
};
Преимущества:
легко использовать
быстро
нет необходимости в сериализации или десериализации
Недостатки:
хрупкий: обновление или закрытие вкладки стирает все
сторонние скрипты могут проверять или перезаписывать глобальные (window) значения
Вы уже используете переменные. Вы можете подумать о постоянном сохранении состояния переменной при выгрузке страницы.
2. DOM Node Storage
метрика комментарий
емкость без строгих ограничений, но не идеально подходит для большого количества данных
скорость чтения/записи быстро
упорство плохо: данные могут быть стерты другими скриптами или обновлением
Большинство элементов DOM, как на странице, так и в памяти, могут хранить значения в именованных атрибутах. Безопаснее использовать имена атрибутов с префиксом data-:
атрибут никогда не будет связан с функциональностью HTML
вы можете получить доступ к значениям через datasetсвойство, а не через более длинные.setAttribute () и.getAttribute () методы.
Значения хранятся в виде строк, поэтому может потребоваться сериализация и десериализация. Например:
// locate
const main = document.querySelector ('main’) ;
// store values
main.dataset.value1 = 1;
main.dataset.state = JSON.stringify ({ a:1, b:2 }) ;
// retreive values
console.log (main.dataset.value1) ; // «1»
console.log (JSON.parse (main.dataset.state).a) ; // 1
Преимущества:
вы можете определить значения в JavaScript или HTML, например
полезно для хранения состояния определенного компонента
ДОМ быстро! (вопреки распространенному мнению)
Недостатки:
хрупкий: обновление или закрытие вкладки стирает все (если только значение не отображается сервером в HTML)
только строки: требуется сериализация и десериализация
больший DOM влияет на производительность
сторонние скрипты могут проверять или перезаписывать значения
Хранилище узлов DOM работает медленнее, чем переменные. Используйте его с осторожностью в ситуациях, когда целесообразно хранить состояние компонента в HTML.
3.
метрика комментарий
емкость 5 МБ на домен
скорость чтения/записи синхронная работа: может быть медленной
упорство данные остаются до очистки
Web Storage предоставляет два похожих API для определения пар имя/значение. Использовать:
window.localStorageдля хранения постоянных данных и
window.sessionStorageчтобы сохранить данные только сеанса, пока вкладка браузера остается открытой (но см. Сохранение данных)
Храните или обновляйте именованные элементы с помощью.setItem ():
localStorage.setItem ('value1', 123) ;
localStorage.setItem ('value2', 'abc’) ;
localStorage.setItem ('state’, JSON.stringify ({ a:1, b:2, c:3 }));
Получите их с помощью. getItem ():
const state = JSON.parse (localStorage.getItem ('state’));
И удалить их с помощью. removeItem ():
localStorage.removeItem ('state’)
Другие свойства и методы включают в себя:
.length: количество сохраненных элементов
.key (N): имя
.clear (): удалить все сохраненные элементы
Изменение любого значения вызывает событие хранения в других вкладках/окнах браузера, подключенных к тому же домену. Ваше приложение может ответить соответствующим образом:
window.addEventListener ('storage’, s => {
console.log (`item changed: ${ s.key }`) ;
console.log (`from value: ${ s.oldValue }`) ;
console.log (`to new value: ${ s.newValue }`) ;
}) ;
Преимущества:
простой API пары имя/значение
параметры сеанса и постоянного хранения
хорошая поддержка браузера
Недостатки:
только строки: требуется сериализация и десериализация
неструктурированные данные без транзакций, индексации или поиска
синхронный доступ повлияет на производительность больших наборов данных
4. Индексированная БД
метрика комментарий
емкость зависит от устройства. Не менее 1 ГБ, но может занимать до 60% оставшегося места на диске.
скорость чтения/записи быстро
упорство данные остаются до очистки
IndexedDB предлагает низкоуровневый API, похожий на NoSQL, для хранения больших объемов данных. Магазин можно индексировать, обновлять с помощью транзакций и искать с помощью асинхронных методов.
API IndexedDB сложен и требует некоторого манипулирования событиями. Следующая функция открывает соединение с базой данных при передаче имени, номера версии и дополнительной функции обновления (вызывается при изменении номера версии):
// connect
function dbConnect (dbName, version, upgrade) {
return new Promise ((resolve, reject) => {
const request = indexedDB.open (dbName, version) ;
request.onsuccess = e => {
resolve (e.target.result) ;
};
request.onerror = e => {
console.error (`indexedDB error: ${ e.target.errorCode }`) ;
};
request.onupgradeneeded = upgrade;
}) ;
}
Следующий код подключается к myDBбазе данных и инициализирует todoхранилище объектов (аналогично таблице SQL или коллекции MongoDB). Затем он определяет автоматически увеличивающийся ключ с именем id:
(async () => {
const db = await dbConnect ('myDB’, 1.0, e => {
db = e.target.result;
const store = db.createObjectStore ('todo’, { keyPath: 'id’, autoIncrement: true }) ;
})
}) () ;
Как только dbсоединение будет готово, вы можете.addдобавить новые элементы данных в транзакцию:
db.transaction (['todo’], 'readwrite’)
.objectStore ('todo’)
.add ({ task: 'do something’ })
.onsuccess = () => console.log ('added’) ;
И вы можете получить значения, такие как первый элемент:
db.transaction (['todo’], 'readonly’)
.objectStore ('todo’)
.get (1)
.onsuccess = data => console.log (data.target.result) ;
// { id: 1, task: 'do something’ }
Преимущества:
гибкое хранилище данных с самым большим пространством
надежные транзакции, индексация и параметры поиска
хорошая поддержка браузера
Недостатки:
сложный обратный вызов и API на основе событий
IndexedDB — лучший вариант для надежного хранения больших объемов данных, но вам понадобится
5. Кэш API
метрика комментарий
емкость зависит от устройства, но Safari ограничивает размер каждого домена до 50 МБ.
скорость чтения/записи быстро
упорство данные остаются до очистки или после двух недель в Safari
Cache API предоставляет хранилище для пар объектов
API обычно используется сервисными работниками для кэширования сетевых ответов для прогрессивных
Следующий код сохраняет сетевой ответ в кэше с именем myCache:
// cache name
const cacheName = 'myCache’;
(async () => {
// cache network response
const stored = await cacheStore ('/service.json’));
console.log (stored? 'stored OK’: 'store failed’) ;
}) () ;
// store request
async function cacheStore (url) {
try {
// open cache
const cache = await caches.open (cacheName) ;
// fetch and store response
await cache.add (url) ;
return true;
}
catch (err) {
return undefined; // store failed
}
}
Аналогичная функция может извлечь элемент из кеша. В этом примере он возвращает основной текст ответа:
(async () => {
// fetch text from cached response
const text = await cacheGet ('/service.json’));
console.log (text) ;
}) () ;
async function cacheGet (url) {
try {
const
// open cache
cache = await caches.open (cacheName),
// fetch stored response
resp = await cache.match (url) ;
// return body text
return await resp.text () ;
}
catch (err) {
return undefined; // cache get failed
}
}
Преимущества:
хранит любой сетевой ответ
может улучшить производительность
позволяет
современный API на основе Promise
Недостатки:
не практично для хранения состояния приложения
возможно, менее полезный за пределами прогрессивных
Apple не была добра к PWA и Cache API
Cache API — лучший вариант для хранения файлов и данных, полученных из сети. Вероятно, вы могли бы использовать его для хранения состояния приложения, но он не предназначен для этой цели, и есть варианты получше.
5.5 Кэш приложений
AppCache был несуществующим предшественником Cache API. Это не то решение для хранения, которое вы ищете. Здесь нечего смотреть. Пожалуйста, двигайтесь дальше.
6. API доступа к файловой системе
метрика комментарий
емкость зависит от оставшегося места на диске
скорость чтения/записи зависит от файловой системы
упорство данные остаются до очистки
API доступа к файловой системе позволяет браузеру читать, записывать, изменять и удалять файлы из вашей локальной файловой системы. Браузеры работают в изолированной среде, поэтому пользователь должен предоставить разрешение на доступ к определенному файлу или каталогу. Это возвращает FileSystemHandle, поэтому
Следующая функция сохраняет большой двоичный объект в локальный файл:
async function save (blob) {
// create handle to a local file chosen by the user
const handle = await window.showSaveFilePicker () ;
// create writable stream
const stream = await handle.createWritable () ;
// write the data
await stream.write (blob) ;
// save and close the file
await stream.close () ;
}
Преимущества:
меньше необходимости загружать файлы или обрабатывать данные на сервере
отличная функция для прогрессивных
Недостатки:
минимальная поддержка браузера (только Chrome)
API может измениться
Этот вариант хранения интересует меня больше всего, но вам придется подождать пару лет, прежде чем он станет пригодным для использования в производственной среде.
7. API файлов и каталогов
метрика комментарий
емкость зависит от оставшегося места на диске
скорость чтения/записи неизвестный
упорство данные остаются до очистки
File and Directory Entries API предоставляет изолированную файловую систему, доступную для домена, которая может создавать, записывать, читать и удалять каталоги и файлы.
Преимущества:
может быть интересное применение
Недостатки:
нестандартные, несовместимости между реализациями и поведение могут измениться.
MDN прямо заявляет: не используйте это на рабочих сайтах. В лучшем случае через несколько лет до широкой поддержки.
8. Файлы cookie
метрика комментарий
емкость 80 КБ на домен (20 файлов cookie размером до 4 КБ в каждом)
скорость чтения/записи быстро
упорство хорошо: данные остаются до тех пор, пока они не будут стерты или не истечет срок их действия
Файлы cookie — это данные, относящиеся к домену. У них есть репутация в отслеживании людей, но они необходимы для любой системы, которая должна поддерживать состояние сервера, например, вход в систему. В отличие от других механизмов хранения, файлы cookie (обычно) передаются между браузером и сервером при каждом
document.cookieустанавливает значения cookie в клиентском JavaScript. Вы должны определить строку с именем и значением, разделенными символом равенства (=). Например:
document.cookie = 'cookie1=123';
document.cookie = 'anothercookie=abc’;
Значения не должны содержать запятых, точек с запятой или пробелов, поэтому encodeURIComponent () может потребоваться:
document.cookie = `hello=${ encodeURIComponent ('Hello, everyone!') }`;
Дополнительные настройки файлов cookie могут быть добавлены через точку с запятой, в том числе:
; domain=: если не установлено, файл cookie доступен только в текущем домене URL. Использование; path=mysite.comразрешит это на любом поддомене домена mysite.com.
; path=: если не установлено, cookie доступен только в текущем пути и дочерних путях. Установите; path=/, чтобы разрешить любой путь в домене.
;
; expires=: дата истечения срока действия файла cookie, например; expires=Thu, 04 July 2021 10:34:38 UTC (используйте date.toUTCString () для правильного форматирования).
; secure: файл cookie будет передаваться только по протоколу HTTPS.
; HTTPOnly: делает файлы cookie недоступными для клиентского JavaScript.
; samesite=: определяет, может ли другой домен получить доступ к файлу cookie. Установите его на lax (по умолчанию, передает файл cookie текущему домену), strict (останавливает отправку исходного файла cookie при переходе по ссылке из другого домена) или none (без ограничений).
Пример: установите файл cookie состояния, срок действия которого истекает через 10 минут, и который будет доступен по любому пути в текущем домене:
const state = { a:1, b:2, c:3 };
document.cookie = `state=${ encodeURIComponent (JSON.stringify (state)) }; path=/; max=age=600`;
document.cookieвозвращает строку, содержащую каждую пару имени и значения, разделенную точкой с запятой. Например:
console.log (document.cookie) ;
// «cookie1=123; anothercookie=abc; hello=Hello%2C%20everyone! ; state=%7B%22a%22%3A1%2C%22b%22%3A2%2C%22c%22%3A3%7D»
Приведенная ниже функция анализирует строку и преобразует ее в объект, содержащий пары «
const
cookie = cookieParser () ;
state = cookie.state;
console.log (state) ;
// { a:1, b:2, c:3 }
// parse cookie values
function cookieParser () {
const nameValue = {};
document.cookie
.split ('; ')
.map (nv => {
nv = nv.split ('=') ;
if (nv[0]) {
let v = decodeURIComponent (nv[1] || '') ;
try { v = JSON.parse (v) ; }
catch (e) {}
nameValue[ nv[0] ] = v;
}
})
return nameValue;
}
Преимущества:
надежный способ сохранить состояние между клиентом и сервером
ограничено доменом и, необязательно, путем
автоматический контроль срока действия с помощью
используется в текущем сеансе по умолчанию (установите дату истечения срока действия, чтобы данные сохранялись после обновления страницы и закрытия вкладок)
Недостатки:
неуклюжая реализация JavaScript (лучше всего создать собственный обработчик файлов cookie или выбрать библиотеку, например
только строки (требуется сериализация и десериализация)
ограниченное пространство для хранения
файлы cookie могут быть проверены сторонними скриптами, если вы не ограничите доступ
обвиняют во вторжении в частную жизнь (региональное законодательство может потребовать от вас показать предупреждение о несущественных файлах cookie)
данные cookie добавляются к каждому
Избегайте файлов cookie, если нет реальной альтернативы.
9.window.name
метрика комментарий
емкость варьируется, но должно быть возможно несколько мегабайт
скорость чтения/записи быстро
упорство данные сеанса остаются до закрытия вкладки
Свойство window.nameустанавливает и получает имя контекста просмотра окна. Вы можете установить одно строковое значение, которое сохраняется между обновлениями браузера или ссылкой в другом месте и щелчком назад. Например:
let state = { a:1, b:2, c:3 };
window.name = JSON.stringify (state) ;
Изучите значение, используя:
state = JSON.parse (window.name) ;
console.log (state.b) ;
// 2
Преимущества:
легко использовать
может использоваться только для данных сеанса
Недостатки:
только строки: требуется сериализация и десериализация
страницы в других доменах могут читать, изменять или удалять данные (никогда не используйте их для конфиденциальной информации)
window.nameникогда не предназначался для хранения данных. Это хак, и есть лучшие варианты.
10.
метрика комментарий
емкость 5 МБ на домен
скорость чтения/записи вялый
упорство данные остаются до очистки
WebSQL был попыткой перенести хранилище баз данных, подобное SQL, в браузер. Пример кода:
// create DB (name, version, description, size in bytes)
const db = openDatabase ('todo’, '1.0', 'my
// create table and insert first item
db.transaction (t => {
t.executeSql ('CREATE TABLE task (id unique, name)') ;
t.executeSql ('INSERT INTO task (id, name) VALUES (1, «wash cat»)') ;
}) ;
// output array of all items
db.transaction (t => {
t.executeSql (
«SELECT * FROM task»,
[],
(t, results) => { console.log (results.rows) ; }
) ;
}) ;
Chrome и некоторые версии Safari поддерживают эту технологию, но Mozilla и Microsoft выступили против нее в пользу IndexedDB.
Преимущества:
предназначен для надежного хранения данных и доступа к ним на стороне клиента
знакомый синтаксис SQL, часто используемый разработчиками на стороне сервера
Недостатки:
ограниченная и глючная поддержка браузера
несогласованный синтаксис SQL в разных браузерах
асинхронный, но неуклюжий API на основе обратного вызова
плохая работа
Не используйте WebSQL! Это не было жизнеспособным вариантом, поскольку спецификация устарела в 2010 году.
Проверка хранилища
Storage API может проверять пространство, доступное для Web Storage, IndexedDB и Cache API. Все браузеры, кроме Safari и IE, поддерживают API на основе Promise, который предлагает.estimate () метод вычисления quota (пространства, доступного для домена) и usage (уже использованного пространства). Например:
(async () => {
if (! navigator.storage) return;
const storage = await navigator.storage.estimate () ;
console.log (`bytes allocated: ${ storage.quota }`) ;
console.log (`bytes in use: ${ storage.usage }`) ;
const pcUsed = Math.round ((storage.usage / storage.quota) * 100) ;
console.log (`storage used: ${ pcUsed }%`) ;
const mbRemain = Math.floor ((storage.quota — storage.usage) / 1024 / 1024) ;
console.log (`storage remaining: ${ mbRemain } MB`) ;
}) () ;
Доступны еще два асинхронных метода:
.persist (): возвращает true, если у сайта есть разрешение на хранение постоянных данных, и
.persisted (): возвращает true, если сайт уже сохранил постоянные данные
Панель приложений в инструментах разработчика браузера (называемая «Хранилище «в Firefox) позволяет просматривать, изменять и очищать localStorage, sessionStorage, IndexedDB, WebSQL, файлы cookie и
Вы также можете проверить данные cookie, отправленные в заголовках
Шведский стол для хранения
Ни одно из этих решений для хранения не является совершенным, и вам потребуется использовать несколько из них в сложном
