Томский политехнический университет
Опубликован: 01.08.2012 | Доступ: свободный | Студентов: 17331 / 1604 | Оценка: 3.91 / 4.09 | Длительность: 12:32: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.

Эмиль Галеев
Эмиль Галеев

По каким то причинам не сохраняется текст. И не выдает сообщение об ошибке если текста нет. Проверил все внимательно проблем в написании нет. Вопрос почему он не сохраняет?

Алексей Вычегжанин
Алексей Вычегжанин

http://www.intuit.ru/studies/courses/3734/976/lecture/27486?page=3

Заполнил html, js и css-файлы согласно рекомендациям. После запуска главной страницы в панели разработчика браузера, во вкл. Console, выдает сообщение об ошибке:

"script.js:85 Uncaught TypeError: Cannot read property 'addEventListener' of null"

, ссылаясь на строку js-файла (функция load()):

" audio.addEventListener('ended', function () "

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

Функция добавления записей в плейлист не работает. Соответственно сам плей-лист и полоса прокрутки не открываются.

Елена Игнатко
Елена Игнатко
Россия, Москва
Алексей Шаповалов
Алексей Шаповалов
Россия, г. Брянск, Брянский государственный технический университет