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

Обновлено: 07.01.2025

Ситуации для хранения и обработки данных в браузере включают:

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

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

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

Сохранение данных

Как правило, данные, которые сохраняются, будут:

Постоянные (persistent): они остаются до тех пор, пока ваш код не решит удалить их, или
изменяемые (volatile) : они остаются до завершения сеанса браузера, обычно, когда пользователь закрывает вкладку

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

Браузеры также записывают состояние страницы. Вы можете уйти с сайта и кликнуть назад или закрыть и снова открыть вкладку; страница должна выглядеть идентично. Переменные и данные, доступные только для сеанса, по-прежнему доступны.

1. Переменные JavaScript

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

Сохранение состояния в переменных JavaScript — самый быстрый и простой вариант. Я уверен, что вам не нужен пример, но …

легко использовать
быстрота
нет необходимости в сериализации или десериализации

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

2. Хранилище узлов DOM

размер — нет строгих ограничений, но не идеально для большого количества данных
скорость чтения / записи — Быстрый
сохранность — плохая: данные могут быть удалены другими скриптами или обновлением

Большинство элементов DOM на странице или в памяти могут хранить значения в именованных атрибутах. Безопаснее использовать имена атрибутов с префиксом data-:

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

Значения хранятся в виде строк, поэтому может потребоваться сериализация и десериализация. Например:

вы можете определять значения в JavaScript или HTML, например <main data-value1=»1″>
полезно для хранения состояния конкретного компонента
DOM работает быстро! (вопреки распространенному мнению)

ненадёжно: обновление или закрытие вкладки стирает значения
только строки: требуется сериализация и десериализация
большой DOM влияет на производительность
сторонние скрипты могут исследовать или перезаписывать значения

Хранилище узлов DOM работает медленнее, чем переменные. Используйте его экономно в ситуациях, когда удобно хранить состояние компонента в HTML.

3. Web хранилище (localStorage и sessionStorage)

размер — 5 МБ на домен
скорость чтения / записи — синхронная работа: может быть медленной
сохранность — данные остаются до тех пор, пока не будут удалены

Веб-хранилище предоставляет два похожих API для определения пар имя/значение. Используйте:

window.localStorage для хранения постоянных данных и
window.sessionStorage для сохранения данных только сеанса, пока вкладка браузера остается открытой

Храните или обновляйте именованные элементы с помощью .setItem():

Получайте их с помощью .getItem():

И удалите их с помощью .removeItem():

Другие свойства и методы включают:

.length: количество хранимых элементов
.key(N): имя N-го ключа
.clear(): удаление всех сохраненных элементов

Изменение любого значения вызывает событие хранения в других вкладках / окнах браузера, подключенных к тому же домену. Ваше приложение может ответить соответствующим образом:

простой API (пары имя / значение)
параметры сеанса и постоянного хранилища
хорошая поддержка браузера

Только строки: требуется сериализация и десериализация
неструктурированные данные без транзакций, индексации или поиска
синхронный доступ повлияет на производительность больших наборов данных

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

4. IndexedDB

размер — зависит от устройства. Не менее 1 ГБ, но может составлять до 60% оставшегося дискового пространства
скорость чтения / записи — быстрый
сохранность — данные остаются до тех пор, пока не будут удалены

IndexedDB предлагает низкоуровневый API, похожий на NoSQL, для хранения больших объемов данных. Хранилище можно индексировать, обновлять с помощью транзакций и выполнять поиск с помощью асинхронных методов.

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

Следующий код подключается к базе данных myDB и инициализирует хранилище объектов todo (аналогично таблице SQL или MongoDB). Затем он определяет автоматически увеличивающийся ключ с именем id:

Как только соединение будет готово, вы можете с помощью .add добавить новые элементы данных в транзакцию:

И вы можете получить значения, например, первый элемент:

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

сложный обратный вызов и API на основе событий
IndexedDB — лучший вариант для надежного хранения больших объемов данных, но вам может понадобиться библиотека-оболочка, такая как idb , Dexie.js или JsStore .

5. Cache API

размер — зависит от устройства, но Safari ограничивает каждый домен до 50 МБ
скорость чтения / записи — быстрый
сохранность — данные остаются до очистки или через две недели в Safari

Аналогичная функция может получить элемент из кеша. В этом примере она возвращает основной текст ответа:

хранит любой сетевой ответ
может улучшить производительность веб-приложений
позволяет веб-приложению работать в автономном режиме
современный API

не практично для хранения состояния приложения
возможно менее полезно за пределами прогрессивных веб-приложений

Apple недоброжелательно относится к PWA и Cache API

Cache API — лучший вариант для хранения файлов и данных, полученных из сети. Вы, вероятно, могли бы использовать его для хранения состояния приложения, но он не предназначен для этой цели, и есть варианты получше.

5.5 AppCache

AppCache был предшественником Cache API . Это не то решение для хранения, которое вы ищете. Здесь ничего нет. Пожалуйста, двигайтесь дальше.

6. API доступа к файловой системе

размер — зависит от оставшегося места на диске
скорость чтения / записи — зависит от файловой системы
сохранность — данные остаются до тех пор, пока не будут удалены

API доступа к файловой системе позволяет браузеру читать, записывать, изменять и удалять файлы из локальной файловой системы. Браузеры работают в изолированной среде, поэтому пользователь должен предоставить разрешение на определенный файл или каталог. Чтобы веб-приложение могло читать или записывать данные, как настольное приложение, используют FileSystemHandle.

Следующая функция сохраняет объект Blob в локальный файл:

веб-приложения могут безопасно читать и записывать в локальную файловую систему
меньше необходимости загружать файлы или обрабатывать данные на сервере
отличная функция для прогрессивных веб-приложений

минимальная поддержка браузера (только Chrome)
API может измениться

Этот вариант хранения для меня очень интересен, но вам придется подождать пару лет, прежде чем он станет жизнеспособным для производственного использования.

7. API записей файлов и каталогов

размер — зависит от оставшегося места на диске
скорость чтения / записи — неизвестный
сохранность — данные остаются до тех пор, пока не будут удалены

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

нестандартные, несовместимость между реализациями и поведение могут измениться.

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

8. Файлы cookie

размер — 80 КБ на домен (20 файлов cookie размером до 4 КБ в каждом)
скорость чтения / записи — быстрый
сохранность — хорошая: данные остаются до тех пор, пока они не будут удалены или не истечет время их жизни

document.cookie устанавливает значения cookie в клиентском JavaScript. Вы должны определить строку с именем и значением, разделенными символом равенства (=). Например:

Значения не должны содержать запятых, точек с запятой или пробелов, поэтому может потребоваться encodeURIComponent():

К дополнительным настройкам файлов cookie можно добавить разделители через точку с запятой, в том числе:

Пример: установить файл cookie, срок действия которого истекает через 10 минут и доступен по любому пути в текущем домене:

document.cookie возвращает строку, содержащую каждую пару имени и значения, разделенную точкой с запятой. Например:

Функция ниже анализирует строку и преобразует ее в объект, содержащий пары имя-значение. Например:

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

Избегайте файлов cookie, используйте их если нет реальной альтернативы.

9. window.name

размер — варьируется, но должно быть несколько мегабайт
скорость чтения / записи — быстрый
сохранность — данные сеанса остаются до закрытия вкладки

Свойство window.name устанавливает и получает имя контекста активного окна. Вы можете установить одно строковое значение, которое будет сохраняться между обновлениями браузера. Например:

Исследуйте значение, используя:

легко использовать
может использоваться только для данных сеанса

Только строки: требуется сериализация и десериализация
страницы в других доменах могут читать, изменять или удалять данные (никогда не используйте их для конфиденциальной информации)

Window.name не предназначен для хранения данных. Это хак, и есть варианты получше.

10. WebSQL

размер — 5 МБ на домен
скорость чтения / записи — медленная
сохранность — данные остаются до тех пор, пока не будут удалены

WebSQL был попыткой перенести в браузер хранилище баз данных, подобное SQL. Пример кода:

Chrome и некоторые версии Safari поддерживают эту технологию, но против нее выступили Mozilla и Microsoft в пользу IndexedDB.

разработан для надежного хранения и доступа к данным на стороне клиента
знакомый синтаксис SQL, часто используемый серверными разработчиками

ограниченная поддержка браузеров
несогласованный синтаксис SQL в браузерах
асинхронный, но медленный API на основе обратного вызова
плохая работа

Не используйте WebSQL! Он не был жизнеспособным вариантом с тех пор, как устарела его спецификация в 2010 году.

Тщательная проверка хранилища

API хранилища может исследовать пространство , доступное для веб-хранилища, IndexedDB, и Cache API. Все браузеры, кроме Safari и IE, поддерживают это API, которое предлагает метод .estimate() для вычисления значений quota (пространства, доступного для домена) и usage (пространства, уже используемого). Например:

Доступны еще два асинхронных метода:

.persist() : возвращает true если у сайта есть разрешение на хранение постоянных данных, и
.persisted() : возвращает true если сайт уже сохранил постоянные данные

Панель «Приложение» в инструментах разработчика браузера ( в Firefox называется « Хранилище» ) позволяет просматривать, изменять и очищать localStorage, sessionStorage, IndexedDB, WebSQL, файлы cookie и кеш хранилища.

Заключение

Ни одно из этих решений для хранения не является идеальным, и вам нужно будет внедрить несколько решений в сложное веб-приложение. Это означает изучение дополнительных API. Но иметь выбор — это хорошо — конечно, при условии, что вы можете подобрать подходящий вариант!

Хранение данных непосредственно в браузере обладает множеством преимуществ, основное из которых это быстрый и независимый от сети доступ к “базе данных”. На данный момент есть 4 активных метода для этого (плюс один устаревший):

Куки
Локальное хранилище
Сессионное хранилище
IndexedDB
WebSQL (устаревшее)

Куки это классический способ хранения простых строчных данных внутри документа. Обычно куки отсылаются с сервера на клиент, который может сохранять их, а затем отправлять обратно на сервер в ответ на последующие запросы. Это может быть использовано для таких вещей, как управление сессиями аккаунта или отслеживание пользовательской информации.

Дополнительно куки можно использовать и для простого хранения данных на клиентской стороне. Поэтому они также часто используются для хранения общих данных типа пользовательских настроек.

Базовые CRUD-операции с куки

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

Преимущества куки

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

Недостатки куки

Они добавляются к загрузке страницы документа
Они могут хранить небольшое количество данных
Они могут содержать только строки.
Потенциальные проблемы с безопасностью.
Это метод не рекомендуется для хранения данных на клиенте с момента появления Web Storage API (локальное и сессионное хранилище).

Поддержка в браузерах

У куки есть базовая поддержка во всех больших браузерах.

Локальное хранилище

Локальное хранилище это одна из разновидностей Web Storage API, специального API для хранения данных в браузере в формате ключ-значение. Этот API был создан как решение для проблем с куки и является более интуитивным и безопасным способом хранения простых данных внутри браузера.

Хотя технически мы можем хранить в локальном хранилище только строки, это обходится за счет преобразования в JSON. Таким образом мы можем сохранять в локальном хранилище более сложные данные по сравнению с куки.

Базовые CRUD-операции с локальным хранилищем

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

Преимущества локального хранилища

Предлагает более простой и интуитивный интерфейс хранения данных .
Более безопасно для хранения данных на клиенте.
Позволяет хранить больше данных (все 3 пункта — в сравнении с куки).

Недостатки локального хранилища

Поддержка в браузерах

Сессионное хранилище

Сессионное хранилище это вторая разновидность Web Storage API. Оно точно такое же как и локальное хранилище за исключением того, что данные хранятся только для сессии вкладки браузера. Как только пользователь уходит со страницы и закрывает браузер, данные очищаются.

Базовые CRUD-операции с сессионным хранилищем

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

Достоинства, недостатки и поддержка в браузерах точно такие же как и у локального хранилища.

IndexedDB

IndexedDB это намного более сложное и проработанное решение для хранения данных в браузере, так как это низкоуровневый API для хранения на клиенте значительного количества структурированных данных. По своей сути это объектно-ориентированная база данных, основанная на JavaScript, которая позволяет нам легко сохранять и извлекать данные, проиндексированные по ключу.

В моей статье Building a Progressive Web Application я более детально рассмотрела как использовать IndexedDB для создания offline-first приложения.

Базовые CRUD-операции с IndexedDB

Примечание: во всех примерах используется библиотека Джейка Арчибальда IndexedDB Promised library, предлагающая работу с IndexedDB при помощи методов на основе промисов.

Использование IndexedDB является более сложным в сравнении с остальными методами хранения данных в браузере. Перед тем как мы сможем создавать/читать/обновлять/удалять какие-либо данные, нам надо сначала открыть базу данных и создать хранилища (аналогичные таблицам в базе данных).

Для создания (или обновления) данных в хранилище нам надо проделать следующие шаги:

А вот действия для извлечения данных:

И наконец, образец кода для удаления данных:

Если вы заинтересованы в том, чтобы узнать больше об использовании IndexedDB, вы можете прочитать мою статью о том, как я использовала это в своем PWA (прогрессивном веб-приложении).

Преимущества IndexedDB

Могут обрабатывать более сложные структурированные данные.
Может работать с разными “базами данными” и “таблицами” внутри каждой “базы данных”.
Больше объем хранения.
Больше контроля по взаимодействию с хранилищем.

Недостатки IndexedDB

Более сложное по сравнению с Web Storage API.

Поддержка в браузерах

WebSQL

WebSQL это API для реляционной базы на клиенте, сходное с SQLite. С 2010 рабочая группа W3C прекратила работу над этой спецификацией и этот API больше не является частью спецификации HTML и не должен использоваться.

От автора: знаете ли вы, какой вариант хранилища в браузере рассмотреть в 2021 году? Современные веб-браузеры предлагают несколько вариантов хранения веб-приложений. И каждый вариант хранения уникален и имеет свои свойства и применение.

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

Введение в параметры и свойства хранилища

Если вы бегло ознакомитесь с Chrome DevTools, вы сможете найти типы хранилищ браузера, перечисленные ниже:

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Давайте узнаем подробности о каждом варианте хранения и его уникальных свойствах.

Локальное хранилище

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

Чтобы установить значения в локальном хранилище в виде массивов, объектов и т.д., Необходимо преобразовать значения в строки с помощью JSON.stringify. При получении JSON.parse восстанавливает элемент обратно в JSON.

var sessionItem = JSON . parse ( localStorage . getItem ( 'session' ) ) ;

Локальное хранилище совместно используется всеми вкладками и окнами из одного источника.

Срок действия данных не истекает.

Поддержка событий хранилища.

Давайте подробнее рассмотрим события хранилища.

Предел хранилища составляет 5 Мб в ведущих браузерах (можно безопасно планировать этот предел).

Сессионное хранилище

Хранилище сеансов похоже на локальное хранилище, с той лишь разницей, что данные в хранилище сеанса хранятся до тех пор, пока вы не закроете вкладку браузера.

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

Следовательно, в сессионном хранилище событие хранения доступно только в iFrames на одной вкладке. Кроме того, как в локальное хранилище, так и в хранилище сеансов, доступ является синхронным, и ваш код JavaScript будет ждать, пока он получит данные при доступе к этим хранилищам.

IndexedDB

IndexedDB ближе к обычной базе данных NoSQL по сравнению с рассмотренными нами хранилищами. Вы можете использовать IndexedDb, если имеете дело со сложными объектами JavaScript, которые трудно сериализовать.
IndexedDB также поддерживает транзакции и хорошо работает с веб-воркерами.

Например, Twitter использует IndexedDB с тремя таблицами для сохранения данных. Вы можете найти последние поисковые запросы в массиве для повышения удобства использования.

Может хранить любые данные типа JavaScript, такие как объект (большой двоичный объект, файл) или массив и т.д., В виде пар ключ-значение.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

API-интерфейсы IndexedDB асинхронны, поэтому по завершении запроса он возвращает обратный вызов.

Может хранить структурированные данные, такие как данные календаря.

Web SQL (устарело)

Недавно W3C объявил, что спецификации WebSQL устарели. В качестве альтернативы W3C предлагает использовать более эффективную indexedDB вместо использования веб-SQL.

В Web SQL есть три метода:

var db = openDatabase ( 'testDB' , '1.0' , 'Test DB' , 3 * 1024 * 1024 ) ; tr . executeSql ( 'CREATE TABLE IF NOT EXISTS TestTable (id unique, data)' ) ; tr . executeSql ( 'INSERT INTO TestTable (id, data) VALUES (1, "itemOne")' ) ; tr . executeSql ( 'INSERT INTO TestTable (id, data) VALUES (2, "itemTwo")' ) ;

В отличие от других вариантов хранения, вы можете использовать SQL-запросы для взаимодействия с базой данных.

Для любого, кто знаком с SQLite, кривая обучения минимальна или отсутствует.

Файлы cookie

Давайте посмотрим, как мы можем получить доступ к клиентскому cookie.

document . cookie = "username=Charuka Herath; expires=Thu, 31 Dec 2020 12:00:00 UTC; path=/" ; document . cookie = "username=; expires=Thu, 31 Dec 2019 12:00:00 UTC; path=/" ;

Однако важно отметить, что файлы cookie отправляются из браузера обратно на сервер для каждого запроса. Поэтому делайте их как можно меньше, чтобы снизить накладные расходы.

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

Файлы cookie сохраняются. Таким образом, данные можно сохранять в браузере до тех пор, пока они не будут очищены.

Может управлять персонализированным контентом и обслуживать его в соответствии с предпочтениями конкретного пользователя.

Поддерживает перекрестное происхождение с подстановочными знаками.

Заключение

Таблица сравнения типов хранилищ

С точки зрения безопасности эти варианты хранения не предназначены для хранения конфиденциальных данных. Но растет тенденция к хранению токенов аутентификации (токенов OpenID) в локальном хранилище, поддерживаемом популярными библиотеками JavaScript, которые открыты для интерпретации. Однако для Cookie есть исключение в хранении идентификатора сеанса, который специально разработан для его хранения.

При выборе вариантов хранения, если требуется только хранить простые пары ключ-значение, лучшим вариантом будет локальное хранилище. Если вы планируете немного улучшить безопасность вкладок браузера, вы можете использовать Session Storage. И помните об ограничениях хранилища, прежде чем выбирать эти два варианта.

И для любых расширенных требований к хранилищу вы можете использовать IndexedDB, который лучше всего подходит в качестве решения для базы данных. Кроме того, для фоновой обработки с веб-воркерами это идеальное решение, позволяющее управлять транзакциями.

Надеюсь, статья будет полезна для расширения кругозора по хранению данных в браузере. Спасибо за прочтение!

Автор: Charuka E Bandara

Редакция: Команда webformyself.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Изучение

Хранение данных и управление ими в браузере — также известное как хранилище на стороне клиента — полезно, когда не нужно или нецелесообразно отправлять их на веб-сервер.

Ситуации для хранения и обработки данных в браузере включают:

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

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

Переменные JavaScript
Хранилище узлов DOM
Интернет-хранилище( localStorageи sessionStorage)
IndexedDB
Cache API(не используйте AppCache !)
API доступа к файловой системе
API записей файлов и каталогов
Cookies
Name
WebSQL

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

Сохранение данных

Как правило, данные, которые вы храните, будут:

постоянный: он остается до тех пор, пока ваш код не решит удалить его, или
volatile: он остается до завершения сеанса браузера, обычно, когда пользователь закрывает вкладку

Реальность более тонкая.

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

Браузеры также записывают состояние страницы. Вы можете уйти с сайта и щелкнуть назад или закрыть и снова открыть вкладку; страница должна выглядеть идентично. Переменные и данные, считающиеся доступными только для сеанса, по-прежнему доступны.

1. Переменные JavaScript

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

легко использовать
быстрый
нет необходимости в сериализации или десериализации

хрупкий: обновление или закрытие вкладки стирает все
сторонние скрипты могут проверять или перезаписывать значения global ( window)

Вы уже используете переменные. Вы можете рассмотреть возможность постоянного сохранения состояния переменной при выгрузке страницы.

2. Хранилище узлов DOM

метрика	комментарий
вместимость	нет строгих ограничений, но не идеально для большого количества данных
скорость чтения / записи	быстрый
упорство	плохой: данные могут быть удалены другими скриптами или обновлением

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

Значения хранятся в виде строк, поэтому может потребоваться сериализация и десериализация. Например:

хрупкий: обновление или закрытие вкладки стирает все (если значение не отображается на сервере в HTML)
Только строки: требуется сериализация и десериализация
более крупный DOM влияет на производительность
сторонние скрипты могут проверять или перезаписывать значения

3. Web Storage ( localStorage and sessionStorage )

метрика	комментарий
вместимость	5 МБ на домен
скорость чтения / записи	синхронная работа: может быть медленной
упорство	данные остаются до тех пор, пока не будут удалены

Веб-хранилище предоставляет два похожих API для определения пар имя / значение. Использовать:

localStorageдля хранения постоянных данных и
window.sessionStorageдля сохранения данных только сеанса, пока вкладка браузера остается открытой

Храните или обновляйте именованные элементы с помощью .setItem():

Получите их с помощью . getItem():

И удалите их с помощью . removeItem():

Другие свойства и методы включают:

.length: количество хранимых элементов
.key(N): имя N-го ключа
.clear(): удалить все сохраненные элементы

Изменение любого значения вызывает событие хранения в других вкладках / окнах браузера, подключенных к тому же домену. Ваше приложение может ответить соответственно:

API простой пары имя / значение
параметры сеанса и постоянного хранения
хорошая поддержка браузера

Только строки: требуется сериализация и десериализация
неструктурированные данные без транзакций, индексации или поиска
синхронный доступ повлияет на производительность больших наборов данных

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

4. IndexedDB

метрика	комментарий
вместимость	зависит от устройства. Не менее 1 ГБ, но может составлять до 60% оставшегося дискового пространства
скорость чтения / записи	быстрый
упорство	данные остаются до тех пор, пока не будут удалены

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

Следующий код подключается к myDBбазе данных и инициализирует todoхранилище объектов (аналогично таблице SQL или коллекции MongoDB). Затем он определяет автоматически увеличивающийся ключ с именем id:

Как только dbсоединение будет готово, вы можете.addдобавить новые элементы данных в транзакцию:

И вы можете получить значения, такие как первый элемент:

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

сложный обратный вызов и API на основе событий

IndexedDB — лучший вариант для надежного хранения больших объемов данных, но вам понадобится библиотека-оболочка, такая как idb, Dexie.js или JsStore.

5. API кеширования

метрика	комментарий
вместимость	зависит от устройства, но Safari ограничивает каждый домен до 50 МБ
скорость чтения / записи	быстрый
упорство	данные остаются до очистки или через две недели в Safari

Следующий код сохраняет сетевой ответ в кэше с именем myCache:

Аналогичная функция может получить элемент из кеша. В этом примере он возвращает основной текст ответа:

хранит любой сетевой ответ
может улучшить производительность веб-приложений
позволяет веб-приложению работать в автономном режиме
современный API на основе обещаний

не практично для хранения состояния приложения
возможно, менее полезен за пределами прогрессивных веб-приложений
Apple недоброжелательно относится к PWA и Cache API

Cache API — лучший вариант для хранения файлов и данных, полученных из сети. Вероятно, вы могли бы использовать его для хранения состояния приложения, но он не предназначен для этой цели, и есть варианты получше.

AppCache был несуществующим предшественником Cache API. Это не то решение для хранения, которое вы ищете. Здесь ничего нет. Пожалуйста, двигайтесь дальше.

6. API доступа к файловой системе

метрика	комментарий
вместимость	зависит от оставшегося места на диске
скорость чтения / записи	зависит от файловой системы
упорство	данные остаются до тех пор, пока не будут удалены

File System Access API позволяет браузер для чтения, записи, изменять и удалять файлы из локальной файловой системы. Браузеры работают в изолированной среде, поэтому пользователь должен предоставить разрешение на определенный файл или каталог. Это возвращает FileSystemHandle, чтобы веб-приложение могло читать или записывать данные, как настольное приложение.

Следующая функция сохраняет Blob- объект в локальный файл:

веб-приложения могут безопасно читать и записывать в локальную файловую систему
меньше необходимости загружать файлы или обрабатывать данные на сервере
отличная функция для прогрессивных веб-приложений

минимальная поддержка браузера (только Chrome)
API может измениться

Этот вариант хранения меня больше всего волнует, но вам придется подождать пару лет, прежде чем он станет пригодным для производственного использования.

7. API записей файлов и каталогов

метрика	комментарий
вместимость	зависит от оставшегося места на диске
скорость чтения / записи	неизвестный
упорство	данные остаются до тех пор, пока не будут удалены

Файлы и каталоги Запись API предоставляют песочницы файловой системы доступной для домена, который может создавать, писать, читать и удалять каталоги и файлов.

нестандартные, несовместимость между реализациями и поведение могут измениться.

MDN прямо заявляет: не используйте это на производственных сайтах. Широкая поддержка будет в лучшем случае через несколько лет.

8. Файлы cookie

метрика	комментарий
вместимость	80 КБ на домен (20 файлов cookie размером до 4 КБ в каждом)
скорость чтения / записи	быстрый
упорство	хорошо: данные остаются до тех пор, пока они не будут удалены или не истечет

document.cookieустанавливает значения cookie в клиентском JavaScript. Вы должны определить строку с именем и значением, разделенными символом равенства ( =). Например:

Значения не должны содержать запятых, точек с запятой или пробелов, поэтому encodeURIComponent()может потребоваться:

К дополнительным настройкам файлов cookie можно добавить разделители через точку с запятой, в том числе:

Пример: установить файл cookie состояния, срок действия которого истекает через 10 минут и доступен по любому пути в текущем домене:

document.cookieвозвращает строку, содержащую каждую пару имени и значения, разделенную точкой с запятой. Например:

Функция ниже анализирует строку и преобразует ее в объект, содержащий пары имя-значение. Например:

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

Избегайте файлов cookie, если нет реальной альтернативы.

9. window.name

метрика	комментарий
вместимость	варьируется, но возможно несколько мегабайт
скорость чтения / записи	быстрый
упорство	данные сеанса остаются до закрытия вкладки

В window.nameсобственности устанавливает и получает имя контекста просмотра окна. Вы можете установить одно строковое значение, которое будет сохраняться между обновлениями браузера или установкой ссылки в другом месте и обратным щелчком. Например:

Изучите значение, используя:

легко использовать
может использоваться для данных только сеанса

Только строки: требуется сериализация и десериализация
страницы в других доменах могут читать, изменять или удалять данные (никогда не используйте их для конфиденциальной информации)

window.nameникогда не предназначался для хранения данных. Это взлом, и есть варианты получше.

10. WebSQL

метрика	комментарий
вместимость	5 МБ на домен
скорость чтения / записи	вялый
упорство	данные остаются до тех пор, пока не будут удалены

WebSQL был попыткой перенести в браузер хранилище баз данных, подобное SQL. Пример кода:

Chrome и некоторые выпуски Safari поддерживают эту технологию, но против нее выступили Mozilla и Microsoft в пользу IndexedDB.

разработан для надежного хранения и доступа к данным на стороне клиента
знакомый синтаксис SQL, часто используемый серверными разработчиками

ограниченная поддержка браузера с ошибками
несогласованный синтаксис SQL в браузерах
асинхронный, но неуклюжий API на основе обратного вызова
плохая работа

Не используйте WebSQL! Это не было жизнеспособным вариантом с тех пор, как спецификация устарела в 2010 году.

Тщательная проверка хранилища

API хранения может исследовать пространство, доступное для веб — хранилище, индексированной, и API кэша. Все браузеры, кроме Safari и IE, поддерживают API на основе обещаний, который предлагает .estimate()метод для вычисления quota(пространства, доступного для домена) и usage(пространства, уже использованного). Например:

Доступны еще два асинхронных метода:

.persist(): возвращается, trueесли у сайта есть разрешение на хранение постоянных данных, и
.persisted(): возвращается, trueесли сайт уже сохранил постоянные данные

Storage Smorgasbord

Ни одно из этих решений для хранения не является идеальным, и вам нужно будет внедрить несколько в сложное веб-приложение. Это означает изучение дополнительных API. Но иметь выбор в каждой ситуации — это хорошо — конечно, при условии, что вы можете выбрать подходящий вариант!

Читайте также: