Что можно требовать в соглашении с пользователем который скачивает набор открытых данных
Обновлено: 19.04.2024
Ситуации для хранения и обработки данных в браузере включают:
- сохранение состояния клиентского приложения, такого как текущий экран, введенные данные, пользовательские настройки и т. д.
- утилиты, которые обращаются к локальным данным или файлам и имеют строгие требования к конфиденциальности
- прогрессивные веб-приложения (PWA), которые работают в автономном режиме
Вот десять вариантов хранения данных браузера:
В этой статье рассматриваются эти десять различных способов хранения данных в браузере, рассматриваются их ограничения, плюсы и минусы, а также наилучшее использование каждого метода. Прежде чем мы перейдем к вариантам, сделаем небольшое примечание о сохранении данных.
Сохранение данных
Как правило, данные, которые сохраняются, будут:
- Постоянные (persistent): они остаются до тех пор, пока ваш код не решит удалить их, или
- изменяемые (volatile) : они остаются до завершения сеанса браузера, обычно, когда пользователь закрывает вкладку
Постоянные данные могут быть заблокированы или удалены пользователем, операционной системой, браузером или плагинами в любой момент. Браузер может принять решение об удалении более старых или больших элементов по мере приближения к граничной емкости, выделенной для этого типа хранилища.
Браузеры также записывают состояние страницы. Вы можете уйти с сайта и кликнуть назад или закрыть и снова открыть вкладку; страница должна выглядеть идентично. Переменные и данные, доступные только для сеанса, по-прежнему доступны.
1. Переменные JavaScript
- размер — нет строгих ограничений, но при заполнении памяти может произойти замедление работы браузера или сбои
- скорость чтения / записи — самый быстрый вариант
- сохранность — плохая: данные стираются при обновлении браузера
Сохранение состояния в переменных JavaScript — самый быстрый и простой вариант. Я уверен, что вам не нужен пример, но …
- легко использовать
- быстрота
- нет необходимости в сериализации или десериализации
- ненадежность: обновление или закрытие вкладки стирает все
- сторонние скрипты могут исследовать или перезаписывать глобальные значения (window). Вы уже используете переменные. Вы можете рассмотреть возможность сохранения состояния переменной при выгрузке страницы .
2. Хранилище узлов DOM
- размер — нет строгих ограничений, но не идеально для большого количества данных
- скорость чтения / записи — Быстрый
- сохранность — плохая: данные могут быть удалены другими скриптами или обновлением
Большинство элементов DOM на странице или в памяти могут хранить значения в именованных атрибутах. Безопаснее использовать имена атрибутов с префиксом data-:
- атрибут никогда не будет иметь связанных функций HTML
- Вы можете получить доступ к значениям с помощью свойства dataset или через методы .setAttribute() и .getAttribute().
Значения хранятся в виде строк, поэтому может потребоваться сериализация и десериализация. Например:
- вы можете определять значения в JavaScript или HTML, например
- полезно для хранения состояния конкретного компонента
- 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 если сайт уже сохранил постоянные данные
Заключение
Ни одно из этих решений для хранения не является идеальным, и вам нужно будет внедрить несколько решений в сложное веб-приложение. Это означает изучение дополнительных API. Но иметь выбор — это хорошо — конечно, при условии, что вы можете подобрать подходящий вариант!
Читайте также: