Опубликован: 01.08.2012 | Уровень: для всех | Доступ: платный | ВУЗ: Томский политехнический университет
Лекция 16:

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

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.

Список материалов для самостоятельного изучения:

  1. http://www.linkexchanger.su/2011/729.html
  2. http://www.wisdomweb.ru/HTML5/webstorage.php
  3. http://www.w3schools.com/html5/html5_webstorage.asp
  4. http://sixrevisions.com/html/introduction-web-storage/
  5. http://www.webreference.com/authoring/languages/html/HTML5-Client-Side/index.html
  6. http://html5app.com/blog/?cat=43
Галина Башкирова
Галина Башкирова

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

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

 

Константин Моренко
Константин Моренко
Алексей Бегунов
Алексей Бегунов
Беларусь
Виктор Лабутин
Виктор Лабутин
Россия