Статьи

Хранение в браузере HTML5: прошлое, настоящее и будущее

Декабрь 19, 2018

У меня есть немного эгоистичные причины для написания этой статьи; Я никогда не могу вспомнить все механизмы хранения на стороне клиента, доступные разработчикам HTML5! Я, возможно, забыл некоторые сейчас …

Зачем хранить данные на клиенте?

Основная причина — практичность. Код JavaScript, работающий в браузере, не обязательно должен отправлять всю информацию на сервер. Есть несколько вариантов использования:

  1. Вы хотите увеличить производительность. Вы можете кэшировать данные на стороне клиента, чтобы их можно было извлечь без дополнительных запросов к серверу.
  2. У вас есть большое количество данных только на стороне клиента, например, строки HTML или параметры конфигурации виджета.
  3. Вы хотите, чтобы ваше приложение работало в автономном режиме.

Давайте посмотрим варианты.

Переменные JavaScript (прошлое, настоящее и будущее)

Самый простой выбор — переменные JavaScript. Может быть целесообразно создать единую глобальную переменную для хранения данных приложения, например 

// global application storage var appDataStore = {}; // set values appDataStore.hello = "Hello World!"; appDataStore.info = { a:1, b:2, c:3 }; // retrieve values console.log(appDataStore.hello); console.log(appDataStore.info.b);

Также возможно хранить значения в DOM страницы в виде атрибутов или свойств узла. Это может быть полезно для значений виджетов, но медленнее и рискованнее, чем переменные JavaScript; будущие браузеры или другие библиотеки могут интерпретировать ваши данные неожиданным образом. 

 // store data in node var mywidget = document.getElementById("mywidget"); mywidget.setAttribute("data-myvalue", "Hello World!"); // retrieve values mywidget.textContent = mywidget.getAttribute("data-myvalue");

Преимущества переменных JavaScript:

  • самое быстрое и простое решение
  • нет необходимости сериализации или десериализации данных
  • идеально подходит для одностраничных приложений

Недостатки:

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

Cookies (прошлое, настоящее и будущее)

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

 // store cookie data document.cookie = "hello=" + escape("Hello World") + "; path=/"; // retrieve value cookies = document.cookie.split(";"), value = null, regexp = new RegExp("^\s*hello=(.*)$"); for (var c = 0; c < cookies.length && !value; c++) { var match = cookies[c].match(regexp); if (match.length == 2) value = unescape(match[1]); } console.log(value);

Преимущества печенья:

  • надежный метод сохранения состояния между клиентом и сервером
  • установив дату окончания срока действия, данные cookie сохранятся и после обновления страницы и закрытия вкладки
  • куки поддерживаются во всех современных браузерах

Недостатки:

  • Неуклюжая реализация JavaScript — вам понадобится библиотека для обработки куки
  • значения являются только строками — другие данные должны быть сериализованы с использованием таких методов, как JSON.stringify и JSON.parse
  • пространство для хранения файлов cookie ограничено — не зависит от наличия более 20 файлов cookie размером 4 КБ каждый
  • куки могут быть удалены или заблокированы
  • куки были несправедливо помечены как угроза конфиденциальности в Интернете; Возможно, вам придется соблюдать причудливые региональные правила и нормы .

Обратная сторона совместного использования файлов cookie клиент / сервер вызывает самую большую техническую проблему. Данные cookie отправляются в заголовке HTTP каждого запроса и ответа. Поэтому он добавляется к каждой странице HTML, изображению, файлу CSS, файлу JavaScript, вызову Ajax и т. Д. Если у вас есть 50 КБ данных cookie и загружено десять 1 КБ изображений, это приведет к одному мегабайту дополнительного сетевого трафика.

window.name (прошлое и настоящее)

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

 window.name = "Hello World!"; console.log(window.name);

Преимущества window.name :

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

Недостатки:

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

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

См. Также: Как написать библиотеку сессий без файлов cookie для JavaScript.

HTML5 Web SQL Database (в прошлом)

База данных Web SQL была первоначальной попыткой поставщиков перенести реляционные базы данных на основе SQL в браузер. Он был реализован в Chrome, Safari и Opera 15+, но Mozilla и Microsoft выступили против IndexedDB .

Преимущества базы данных Web SQL:

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

Недостатки:

  • SQL никогда не подходил для разработки на стороне клиента
  • схема базы данных должна быть определена заранее
  • поддержка маргинального браузера, и команды Webkit / Blink могут в конечном итоге отбросить его
  • спецификация W3C была отменена в 2010 году

В итоге: не используйте базу данных Web SQL !

Смотрите также: Спецификация базы данных W3C Web SQL

HTML5 Web Storage (настоящее и будущее)

Веб-хранилище предоставляет два объекта с одинаковыми API: window.localStorage для сохранения постоянных данных и code.sessionStorage для сохранения данных code.sessionStorage для сеанса, которые теряются при закрытии вкладки. Специфичные для домена строки хранятся с использованием пар имя / значение. В отличие от файлов cookie, ограничение хранилища намного больше (не менее 5 МБ), и информация никогда не передается на сервер. 

 // is localStorage available? if (typeof window.localStorage != "undefined") { // store localStorage.setItem("hello", "Hello World!"); // retrieve console.log(localStorage.getItem("hello")); // delete localStorage.removeItem("hello"); }

Преимущества веб-хранилища:

  • прост в использовании с простыми парами имя / значение
  • Доступны параметры сеанса и постоянного хранения.
  • доступна модель событий для синхронизации других вкладок и окон
  • широкая поддержка настольных и мобильных браузеров, включая IE8 +
  • Полифиллы веб-хранилища доступны для старых браузеров, которые используют методы хранения файлов cookie и windows.name

Недостатки:

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

Смотрите также:

HTML5 IndexedDB (Будущее)

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

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

  • разработан для надежного хранения и доступа к данным на стороне клиента
  • хорошая поддержка в современных настольных браузерах: IE10 +, Firefox 23+, Chrome 28+ и Opera 16+

Недостатки:

  • API очень новый и подлежит пересмотру
  • небольшая поддержка в старых и мобильных браузерах
  • большой и сложный API — было бы сложно и в значительной степени нецелесообразно создавать polyfill IndexedDB
  • Как и в любом хранилище NoSQL, данные неструктурированы, что может привести к проблемам целостности

Смотрите также:

HTML5 File API (будущее)

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

Преимущества HTML5 File API:

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

Недостатки:

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

Смотрите также:

Резюме

Там у нас это есть — не менее семи вариантов хранения. Мои прагматичные рекомендации на данный момент:

  1. Переменные JavaScript всегда будут необходимы, но используйте их только для изменчивых данных в памяти. Избегайте атрибутов / свойств DOM, когда это возможно.
  2. Предполагая, что это необходимо, используйте куки для сохранения состояния между клиентом и сервером. Но держите печенье маленьким; одного токена с несколькими символами должно быть достаточно.
  3. Используйте HTML5 Web Storage для хранения данных в автономном режиме или когда требуются большие объемы информации только на стороне клиента.
  4. Если вам необходимо поддерживать более старые браузеры, такие как IE6 и IE7, используйте полизаполнение веб-хранилища, которое реализует API с использованием файлов cookie и window.name .
  5. Следите за IndexedDB ; со временем он станет жизнеспособным механизмом хранения, когда устаревшие браузеры вымирают.
  6. Аналогично, File API будет становиться все более практичным для хранения неструктурированных данных. Возможно, это лучшее решение для сгенерированных двоичных данных, таких как изображения, аудио, видео и PDF.

Или, может быть, у вас есть дальнейшие мысли?

Комментарии к этой статье закрыты. У вас есть вопрос о HTML5? Почему бы не спросить об этом на наших форумах ?

37
Share: