Томский политехнический университет
Опубликован: 01.08.2012 | Доступ: свободный | Студентов: 17106 / 1586 | Оценка: 3.91 / 4.09 | Длительность: 12:36:00
Лекция 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
Эмиль Галеев
Эмиль Галеев

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

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

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 () "

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

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

Александр Кудаков
Александр Кудаков
Россия
Людмила Евсюкова
Людмила Евсюкова
Россия, Московская обл