Томский политехнический университет
Опубликован: 01.08.2012 | Доступ: свободный | Студентов: 20702 / 2348 | Оценка: 3.91 / 4.09 | Длительность: 12:36:00
Лекция 16:

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

Аннотация: Cookie. Технология HTML5 WebStorage. Особенности хранения данных на стороне клиента: Отличия локального хранилища от сеансового. Сохранение и извлечение данных.

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

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 предлагает два объекта для хранения данных на клиенте:

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

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

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

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

Сергей Крупко
Сергей Крупко

Добрый день.

Я сейчас прохожу курс  повышения квалификации  - "Профессиональное веб-программирование". Мне нужно получить диплом по этому курсу. Я так полагаю нужно его оплатить чтобы получить диплом о повышении квалификации. Как мне оплатить этот курс?

 

Галина Башкирова
Галина Башкирова

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

Системный администратор информационно-коммуникационных» систем.
Мне нужно самой найти тему? или делать по высланным темам