- Web Storage
-
HTML - HTML и HTML5
- Динамический HTML
- XHTML
- XHTML Mobile Profile и CHTML
- Canvas
- Кодировки символов
- Document Object Model
- Семейство шрифтов
- Редактор HTML
- Элементы HTML
- Мнемоники в HTML
- Фреймы HTML
- HTML5 audio и HTML5 video
- Скрипты в HTML
- Браузерный движок
- Quirks mode
- Таблицы стилей
- Каскадные таблицы стилей
- Unicode и HTML
- W3C и WHATWG
- Цвета HTML
- Web Storage
- WebGL
- Сравнение
- языков разметки документов
- браузеров
- браузерных движков для
- HTML
- HTML5
- HTML5 Canvas
- HTML5 Media
- XHTML (1.1)
Интернет-хранилище или DOM-хранилище (Document Object Model) - это программные методы и протоколы веб-приложения, используемые для хранения данных в веб-браузере. Интернет-хранилище представляет собой постоянное хранилище данных, похожее на куки, но со значительно расширенной емкостью, а не информацию, хранящуюся в заголовке запроса HTTP. Существуют два основных типа веб-хранилища: локальное хранилище (localStorage) и сессионное хранилище (sessionStorage), ведущие себя аналогично постоянным и сессионным кукам соответственно [1].
В настоящее время стандарты Интернет-хранилища разработаны и предложены WWW Консорциумом (W3C). Первоначально стандарты были частью спецификации HTML 5, но сейчас являются отдельной спецификацией.[2] Оно поддерживается Internet Explorer 8 и выше, Mozilla-браузерами (например, Firefox 2+, официально от 3,5), Safari 4 и выше, Google Chrome 4 (поддержка sessionStorage добавлена от 5) и Opera начиная с версии 10.50.[3]
Содержание
Особенности
Интернет-хранилище упрощенно можно рассматривать как усовершенствование куки. Тем не менее, она отличается от куки в некоторых ключевых направлениях.
Размер хранилища
Интернет-хранилище поддерживает гораздо больше места на диске в сравнении с куки, которому доступно всего 4 Кбайта, что примерно в 1000 раз меньше чем у веб-хранилища (5 Мбайт на домен в Mozilla Firefox, Google Chrome, и Opera[4], и в Internet Explorer 10 Мбайт[5]).
Интерфейс на стороне клиента
В отличие от Куки, которые могут быть доступны как на сервере, так и на стороне клиента, веб-хранилище попадает исключительно под компетенцию сценариев (скриптов) на стороне клиента. Данные интернет-хранилища не передаются на сервер при каждом запросе HTTP, и веб-сервер не может напрямую записать в интернет-хранилище.
Локальное хранилище и Сохранение сессии
Интернет-хранилище предлагает две различных области: Локальная память хранения и Сохранение сессии, которые отличаются по своим масштабам и времени жизни. Данные размещаются в отдельное для каждого домена локальное хранилище (оно доступно для всех скриптов из домена, который первоначально добавил данные) и сохраняются после закрытия браузера. Сессия сохраняется по принципу одна-страница-одно-окно и ограничивается жизнью данного окна, то есть для каждого открытого окна создается новая сессия, которая прекращает свое существование при закрытии окна и не зависит от домена открывшего ее. Сохранение сессии предназначено для предоставления отдельных экземпляров одного и того же веб-приложения для работы в разных окнах, не мешая друг другу[6]. В случае с Куки подобное становится крайне затруднительно или даже невозможно.
Интерфейс и модель данных
Интернет-хранилище в настоящее время предоставляет программный интерфейс лучше, чем Куки. Интерфейс представляет из себя ассоциативный массив модели данных, где ключи и значения являются строками. Дополнительный API для доступа к структурированным данным на основе SQL находится на рассмотрении рабочей группы W3C.
Использование
У браузеров, поддерживающих Веб-хранилища, глобальные переменные 'sessionStorage' и 'localStorage' определены на уровне окна (window level). Следующий код JavaScript может быть использован в этих браузерах, чтобы вызвать Веб-хранилища:
sessionStorage
// Store value on browser for duration of the session sessionStorage.setItem('key', 'value'); // Retrieve value (gets deleted when browser is closed and re-opened) alert(sessionStorage.getItem('key'));
localStorage
// Store value on the browser beyond the duration of the session localStorage.setItem('key', 'value'); // Retrieve value (works even after closing and re-opening the browser) alert(localStorage.getItem('key'));
Доступ к данным для определенного домена
Следующий код может быть использован для получения всех значений, хранящихся в локальном хранилище для конкретной предметной области (просматриваемой веб-страницы). Этот код JavaScript может быть выполнен с использованием средств разработки, имеющихся в большинстве современных браузеров, таких как IE панель инструментов разработчика, Chrome Developer Tools, или Firebug расширение в Firefox:
var output = "LOCALSTORAGE DATA:\n------------------------------------\n"; if (localStorage) { if (localStorage.length) { for (var i = 0; i < localStorage.length; i++) { output += localStorage.key(i) + ': ' + localStorage.getItem(localStorage.key(i)) + '\n'; } } else { output += 'There is no data stored for this domain.'; } } else { output += 'Your browser does not support local storage.' } alert(output);
Типы данных
Важно отметить, что только строки (string) могут быть сохранены с помощью API хранилища. Попытка сохранить другой тип данных в большинстве браузеров приведет к автоматической конвертации в строку. Однако, преобразование в JavaScript Object Notation (JSON), дает возможность эффективного хранения объектов JavaScript.
// Store an object instead of a string localStorage.setItem('key', {name: 'value'}); alert(typeof localStorage['key']); // string // Store an integer instead of a string localStorage.setItem('key', 1); alert(typeof localStorage['key']); // string // Store an object using JSON localStorage.setItem('key', '{"name":"value"}'); alert(JSON.parse(localStorage['key']).name); // value
Подобные технологии
- HTTP cookie
- Indexed Database API (прежде WebSimpleDB)
- Web SQL База Данных
- Общие локальные объекты в Adobe Flash
- userData Behavior в Internet Explorer
- Google Gears
Примечания
- ↑ sessionStorage и localStorage. http://msdn.microsoft.com/ru-ru/library/cc197062(v=VS.85).aspx
- ↑ Введение в хранилище HTML5 - http://htmlbook.ru/html5/storage
- ↑ Поддержка HTML5-хранилища - http://htmlbook.ru/html5/storage
- ↑ http://www.linkexchanger.su/2011/729.html
- ↑ Знакомство с хранилищем DOM
- ↑ Знакомство с хранилищем DOM
Ссылки
- W3C: Web Storage(eng.)
- Mozilla Developer Center: DOM Storage(eng.)
- Знакомство с хранилищем DOM
- Локальное хранилище (Марк Пилгрим)
- «Переезжаем» в офлайн (статья на Хабрахабре)
- Что такое Web Storage?
Категория:- Стандарты W3C
Wikimedia Foundation. 2010.