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