HTML5. Хранения данных на стороне клиента

Показывать лекцию целиком

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

Cookie

Прежде чем говорить о том, что есть, давайте разберемся с тем, что было.

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

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

Сохраняемые в файлах "cookie" данные могут использоваться серверами для запоминания информации о конкретных пользователях, посещающих веб-страницы на данном сервере.

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

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

cookie поддерживаются со времен выпуска первого браузера Netscape.

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

ограничение размера cookie файла (4кб);

безопасность (файлы "видны в сети");

поскольку файлы передаются при каждом к ним обращении, т.е. занимают часть пропускной способности канала;

ряд пользователей требует наличия в браузерах возможности блокировки использования cookie - файлов, что ограничивает их использование в настоящее время.

Технология Web Storage

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

HTML5 Web Storage предоставляет программный интерфейс, посредством которого, разработчики могут сохранять данные в легко извлекаемых JavaScript-объектах, постоянно существующих от одной загрузки страницы к другой. Используя хранилище сеанса (sessionStorage) или локальное хранилище(localStorage), разработчики могут сами определять, должны ли данные сохраняться по отдельности для страниц, открытых в одном и том же окне (вкладке), и прекращать существование после закрытия этого окна (вкладки) или же совместно использоваться всеми окнами (вкладками) и продолжать существовать даже после перезапуска браузера.

В настоящее время заявлена поддержка технологии следующими браузерами:

Internet Explorer от 8.0 версии;

Mozilla Firefox от 3.5 версии;

Safari от 4.0 версии;

Chrome от 4.0 версии;

Opera от 10.5 версии;

iPhone от 2.0 версии;

Android от 2.0 версии.

Особенности хранения данных на стороне клиента

HTML5 предлагает два объекта для хранения данных на клиенте:

localStorage - хранит данные без временных ограничений;

sessionStorage - хранит данные в течение одной сессии.

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

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

Для работы с хранилищами данных используется javascript.

localStorage

localStorage представлет собой базу данных на стороне клиента, содержащую пары "ключ-значение".

К преимуществам локального хранилища относят:

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

Данные хранятся на стороне клиента.

Время хранения данных не ограничено.

sessionStorage

Фактически, отличий от localStorage не так много и о них мы скажем отдельно. Остается только отметить, что объект sessionStorage сохраняет данные в течении пользовательской сессии. Когда браузер пользователя будет закрыт данные сохраненные в объекте будут удалены. Данные в хранилище доступны со всех страниц сайта, а не только с той с которой они были сохранены.

Отличия локального хранилища от сеансового

Главное отличие различных типов хранилищ – время хранения данных и их доступность.

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

localStorage позволяет хранить данные и после прекращения сеанса.

С точки зрения программирования различие в использовании сеансового и локального типов хранилищ сводится к различию имен объектов, посредством которых осуществляется доступ к ним: sessionStorage и localStorage соответственно.

Сохранение и извлечение данных

Для этого необходимо проверить, поддерживает ли клиент Local storage:

function isLocalStorageAvailable() { 
  try { 
    return 'localStorage' in window  window['localStorage'] !== null; 
  } catch (e) { 
    return false; 
  }
}

Существует несколько способов сохранения и извлечения данных:

localStorage.setItem('id', 'value');
localStorage['id'] = 'value';

Функция setItem принимает строку ключа и строку значения в качестве аргументов. Несмотря на то что формат данных Web Storage поддерживает передачу значений, не являющихся строковыми, в текущих версиях браузеров набор поддерживаемых типов значений, как правило, ограничен строками.

Соответственно и извлечь данные можно следующим образом:

var data = localStorage.getItem('id');
var data = localStorage['data'];

Осталось только рассмотреть способы удаления данных из хранилища.

Удаление определенного хранимого элемента:

localStorage.removeItem('id');

Удаление всех элементов:

localStorage.clear();

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

Ключевые термины и определения

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

HTML5 Web Storage – технология, предоставляющая программные интерфейсы для организации хранения данных на стороне клиента.

Краткие итоги

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

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

Более детально работа хранение данных на стороне клиента средствами HTML5 будет рассмотрена в рамках практического занятия №4.