Web Storage: различия между версиями

Материал из Википедии — свободной энциклопедии
Перейти к навигации Перейти к поиску
Интерактивная навигация по истории
(Показать все непатрулированные изменения)
[непроверенная версия][непроверенная версия]
← Предыдущая правка
Содержимое удалено Содержимое добавлено
ВизуальныйВики-текст
Поправлена ссылка на страницу описания для технологии https://ru.wikipedia.org/wiki/Web_SQL
 
(не показано 29 промежуточных версий 25 участников)
Строка 1: Строка 1:
{{HTML}}
{{HTML}}
'''Интернет-хранилище''' или '''DOM-хранилище''' ([[Document Object Model]]) - это программные методы и протоколы [[Веб-приложение|веб-приложения]], используемые для хранения данных в веб-браузере. Интернет-хранилище представляет собой [[постоянное хранилище данных]], похожее на [[HTTP cookie|куки]], но со значительно расширенной емкостью и без хранения информации в [[Список заголовков HTTP|заголовке запроса HTTP]]. Существуют два основных типа веб-хранилища: локальное хранилище (localStorage) и сессионное хранилище (sessionStorage), ведущие себя аналогично постоянным и сессионным кукам соответственно <ref>sessionStorage и localStorage. http://msdn.microsoft.com/ru-ru/library/cc197062(v=VS.85).aspx</ref>.<br /><br />
'''Интернет-хранилище''' или '''[[Document Object Model|DOM]]-хранилище''' — это программные методы и протоколы [[Веб-приложение|веб-приложения]], используемые для хранения данных в веб-браузере. Интернет-хранилище представляет собой [[постоянное хранилище данных]], похожее на [[HTTP cookie|куки]], но со значительно расширенной ёмкостью и без хранения информации в [[Список заголовков HTTP|заголовке запроса HTTP]]. Существуют два основных типа веб-хранилища: локальное хранилище (localStorage) и сессионное хранилище (sessionStorage), ведущие себя аналогично постоянным и сессионным кукам соответственно<ref>sessionStorage и localStorage. http://msdn.microsoft.com/ru-ru/library/cc197062(v=VS.85).aspx {{Wayback|url=http://msdn.microsoft.com/ru-ru/library/cc197062(v=VS.85).aspx |date=20120101073324 }}</ref>.

В настоящее время стандарты Интернет-хранилища разработаны и предложены [[Консорциум Всемирной паутины|WWW Консорциумом (W3C)]]. Первоначально стандарты были частью спецификации [[HTML 5]], но сейчас являются отдельной спецификацией.<ref>Введение в хранилище HTML5 - http://htmlbook.ru/html5/storage</ref> Интернет-хранилище поддерживается [[Internet Explorer]] 8 и выше, Mozilla-браузерами (например, [[Firefox]] 2+, официально от 3,5), [[Safari]] 4 и выше, [[Google Chrome]] 4 (поддержка sessionStorage добавлена от 5) и [[Opera]] начиная с версии 10.50.<ref>Поддержка HTML5-хранилища - http://htmlbook.ru/html5/storage</ref><br />
В настоящее время стандарты Интернет-хранилища разработаны и предложены [[Консорциум Всемирной паутины|WWW-консорциумом (W3C)]]. Первоначально стандарты были частью спецификации [[HTML 5]], но сейчас являются отдельной спецификацией<ref>Введение в хранилище HTML5 — http://htmlbook.ru/html5/storage {{Wayback|url=http://htmlbook.ru/html5/storage |date=20111231032147 }}</ref>. Интернет-хранилище поддерживается [[Internet Explorer]] 8 и выше, Mozilla-браузерами (например, [[Firefox]] 2+, официально от 3,5), [[Safari]] 4 и выше, [[Google Chrome]] 4 (поддержка sessionStorage добавлена от 5) и [[Opera]] начиная с версии 10.50<ref>Поддержка HTML5-хранилища — http://htmlbook.ru/html5/storage {{Wayback|url=http://htmlbook.ru/html5/storage |date=20111231032147 }}</ref>.
<br />


== Особенности ==
== Особенности ==
Интернет-хранилище упрощенно можно рассматривать как усовершенствование [[HTTP cookie|куки]]. Тем не менее, она отличается от [[HTTP cookie|куки]] в некоторых ключевых направлениях.
Интернет-хранилище упрощённо можно рассматривать как усовершенствование [[HTTP cookie|куки]]. Тем не менее, оно отличается от [[HTTP cookie|куки]] в некоторых ключевых направлениях.

=== Размер хранилища ===
=== Размер хранилища ===
Интернет-хранилище поддерживает гораздо больше места на диске в сравнении с кукой, которому доступно всего 4 Кбайта, что примерно в 1000 раз меньше чем у веб-хранилища (5 Мбайт на домен в [[Firefox|Mozilla Firefox]], [[Google Chrome]], и [[Opera]]<ref>[http://www.linkexchanger.su/2011/729.html Что такое Web Storage? | HTML5<!-- Заголовок добавлен ботом -->]</ref>, и в [[Internet Explorer]] 10 Мбайт<ref>[http://msdn.microsoft.com/ru-ru/library/cc197062(v=VS.85).aspx#window.localStorage Знакомство с хранилищем DOM<!-- Заголовок добавлен ботом -->]</ref>).
Интернет-хранилище поддерживает гораздо больше места на диске в сравнении с куки, которому доступно всего 4 Кбайта, что примерно в 1000 раз меньше чем у веб-хранилища (5 Мбайт на домен в [[Firefox|Mozilla Firefox]], [[Google Chrome]], и [[Opera]], и 10 Мбайт в [[Internet Explorer]]<ref>{{Cite web |url=http://msdn.microsoft.com/ru-ru/library/cc197062(v=VS.85).aspx#window.localStorage |title=Знакомство с хранилищем DOM |access-date=2012-01-07 |archive-date=2012-01-01 |archive-url=https://web.archive.org/web/20120101073324/http://msdn.microsoft.com/ru-ru/library/cc197062(v=VS.85).aspx#window.localStorage |deadlink=no }}</ref>).


=== Интерфейс на стороне клиента ===
=== Интерфейс на стороне клиента ===
В отличие от [[HTTP cookie|Куки]], которые могут быть доступны как на сервере, так и на стороне клиента, веб-хранилище попадает исключительно под компетенцию сценариев (скриптов) на стороне клиента. Данные интернет-хранилища не передаются на сервер при каждом запросе HTTP, и веб-сервер не может напрямую записать в интернет-хранилище.
В отличие от [[HTTP cookie|куки]], которые могут быть доступны как на сервере, так и на стороне клиента, веб-хранилище попадает исключительно под компетенцию сценариев (скриптов) на стороне клиента. Данные интернет-хранилища не передаются на сервер при каждом запросе HTTP, и веб-сервер не может напрямую записать в интернет-хранилище.


=== Локальное хранилище и Сессионное хранилище ===
=== Локальное хранилище и Сессионное хранилище ===
Интернет-хранилище предлагает две различных области: Локальное хранилище и Сессионное хранилище, которые отличаются по своим масштабам и времени жизни. Данные размещаются в отдельное для каждого домена локальное хранилище (оно доступно для всех скриптов из домена, который первоначально добавил данные) и сохраняются после закрытия браузера. Сессия сохраняется по принципу одна-страница-одно-окно и ограничивается жизнью данного окна, то есть для каждого открытого окна создается новая сессия, которая прекращает свое существование при закрытии окна и не зависит от домена открывшего ее. Сохранение сессии предназначено для предоставления отдельных экземпляров одного и того же веб-приложения для работы в разных окнах, не мешая друг другу<ref>[http://msdn.microsoft.com/ru-ru/library/cc197062(v=VS.85).aspx#window.sessionStorage Знакомство с хранилищем DOM<!-- Заголовок добавлен ботом -->]</ref>. В случае с [[HTTP cookie|Куки]] подобное становится крайне затруднительно или даже невозможно.
Интернет-хранилище предлагает две различных области: {{видимый якорь|локальное хранилище|localStorage}} ({{langi|en|localStorage}}) и {{видимый якорь|сессионное хранилище|sessionStorage}} ({{langi|en|sessionStorage}}), которые различаются по своим объёмам и времени жизни. Данные размещаются в отдельное для каждого домена локальное хранилище (оно доступно для всех скриптов из домена, который первоначально добавил данные) и сохраняются после закрытия браузера. Сессия сохраняется по принципу одна страница - одно окно и ограничивается жизнью данного окна, то есть для каждого открытого окна создаётся новая сессия, которая прекращает своё существование при закрытии окна и не зависит от домена, открывшего её. Сохранение сессии предназначено для предоставления отдельных экземпляров одного и того же веб-приложения для работы в разных окнах, не мешая друг другу<ref>{{Cite web |url=http://msdn.microsoft.com/ru-ru/library/cc197062(v=VS.85).aspx#window.sessionStorage |title=Знакомство с хранилищем DOM |access-date=2012-01-07 |archive-date=2012-01-01 |archive-url=https://web.archive.org/web/20120101073324/http://msdn.microsoft.com/ru-ru/library/cc197062(v=VS.85).aspx#window.sessionStorage |deadlink=no }}</ref>. В случае с [[HTTP cookie|куки]] подобное становится крайне затруднительно или даже невозможно.


=== Интерфейс и модель данных ===
=== Интерфейс и модель данных ===
Интернет-хранилище в настоящее время предоставляет программный интерфейс лучше, чем [[HTTP cookie|Куки]]. Интерфейс представляет из себя [[ассоциативный массив]] [[Модель данных|модели данных]], где ключи и значения являются строками. Дополнительный [[Интерфейс программирования приложений|API]] для доступа к структурированным данным на основе [[SQL]] находится на рассмотрении рабочей группы W3C.
Интернет-хранилище в настоящее время предоставляет программный интерфейс лучше, чем [[HTTP cookie|куки]]. Интерфейс представляет собой [[ассоциативный массив]] [[Модель данных|модели данных]], где ключи и значения являются строками. Дополнительный [[Интерфейс программирования приложений|API]] для доступа к структурированным данным на основе [[SQL]] находится на рассмотрении рабочей группы W3C.

== Использование ==
У [[Браузер|браузеров]], поддерживающих Веб-хранилища, глобальные переменные 'sessionStorage' и 'localStorage' определены на уровне окна (window level). Перед использованием необходимо проверить, поддерживает ли браузер технологию.
<source lang="javascript">
function isLocalStorageAvailable() {
try {
return 'localStorage' in window && window['localStorage'] !== null;
} catch (e) {
return false;
}
}

if(isLocalStorageAvailable()){
// есть поддержка localStorage
}else{
// нет поддержки localStorage
}
</source>
Следующий код [[JavaScript]] может быть использован в этих браузерах, чтобы вызвать Веб-хранилища:
=== sessionStorage ===
<source lang="javascript">
// 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'));
</source>

=== localStorage ===
<source lang="javascript">
// 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'));
</source>

=== Доступ к данным для определенного домена ===
Следующий код может быть использован для получения всех значений, хранящихся в локальном хранилище для конкретного домена (просматриваемой веб-страницы).
Этот код JavaScript может быть выполнен с использованием средств разработки, имеющихся в большинстве современных браузеров, таких как [[IE Developer Toolbar|IE панель инструментов разработчика]], Chrome [http://code.google.com/chrome/devtools/ Developer Tools], или [[Firebug]] расширение в Firefox:
<source lang="javascript">
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);
</source>

=== Типы данных ===
Важно отметить, что только строки (string) могут быть сохранены с помощью API хранилища. Попытка сохранить другой тип данных в большинстве браузеров приведет к автоматической конвертации в строку. Однако, можно преобразовать объекты JavaScript в строку используя [[JSON]].
<source lang="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.getItem('key')).name); // value
</source>


== Подобные технологии ==
== Подобные технологии ==
* [[HTTP cookie]]
* [[HTTP cookie]]
* [[Indexed Database API]] (прежде WebSimpleDB)
* [[Indexed Database API]] (прежде WebSimpleDB)
* [[Web SQL База Данных]]
* [[Web SQL|Web SQL База Данных]]
* [[Общие локальные объекты]] в [[Adobe Flash]]
* [[Общие локальные объекты]] в [[Adobe Flash]]
* [[userData Behavior]] в [[Internet Explorer]]
* [[userData Behavior]] в [[Internet Explorer]]
Строка 101: Строка 31:


== Ссылки ==
== Ссылки ==
* [http://www.w3.org/TR/webstorage/ W3C: Web Storage]<small>(eng.)</small>
* [http://www.w3.org/TR/webstorage/ W3C: Web Storage] {{Wayback|url=http://www.w3.org/TR/webstorage/ |date=20210421231805 }}<small>(eng.)</small>
* [https://developer.mozilla.org/En/DOM:Storage Mozilla Developer Center: DOM Storage]<small>(eng.)</small>
* [https://web.archive.org/web/20110629092108/https://developer.mozilla.org/En/DOM:Storage Mozilla Developer Center: DOM Storage]<small>(eng.)</small>
* [http://msdn.microsoft.com/ru-ru/library/cc197062(v=VS.85).aspx Знакомство с хранилищем DOM]
* [http://msdn.microsoft.com/ru-ru/library/cc197062(v=VS.85).aspx Знакомство с хранилищем DOM] {{Wayback|url=http://msdn.microsoft.com/ru-ru/library/cc197062(v=VS.85).aspx |date=20120101073324 }}
* [http://htmlbook.ru/html5/storage Локальное хранилище] (Марк Пилгрим)
* [http://htmlbook.ru/html5/storage Локальное хранилище] {{Wayback|url=http://htmlbook.ru/html5/storage |date=20111231032147 }} (Марк Пилгрим)
* [http://habrahabr.ru/blogs/webdev/117123/ «Переезжаем» в офлайн] (статья на Хабрахабре)
* [http://habrahabr.ru/post/117123/ «Переезжаем» в офлайн] {{Wayback|url=http://habrahabr.ru/post/117123/ |date=20160807072659 }} (статья на Хабрахабре)
* [http://www.linkexchanger.su/2011/729.html Что такое Web Storage?]
* [https://web.archive.org/web/20120115111226/http://www.linkexchanger.su/2011/729.html Что такое Web Storage?]
* [http://urvanov.ru/2015/07/13/html5-localstorage-в-javascript/ Краткое описание и примеры использования] {{Wayback|url=http://urvanov.ru/2015/07/13/html5-localstorage-%D0%B2-javascript/ |date=20150713221609 }}
* [http://soft.mail.ru/pressrl_page.php?id=50824 Новый эксплойт «захламляет» жесткий диск]

{{Стандарты W3C}}


[[Категория:Стандарты W3C]]
[[Категория:Стандарты W3C]]

Текущая версия от 14:18, 21 августа 2024

HTML

Интернет-хранилище или DOM-хранилище — это программные методы и протоколы веб-приложения, используемые для хранения данных в веб-браузере. Интернет-хранилище представляет собой постоянное хранилище данных, похожее на куки, но со значительно расширенной ёмкостью и без хранения информации в заголовке запроса 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, и 10 Мбайт в Internet Explorer[4]).

Интерфейс на стороне клиента

[править | править код]

В отличие от куки, которые могут быть доступны как на сервере, так и на стороне клиента, веб-хранилище попадает исключительно под компетенцию сценариев (скриптов) на стороне клиента. Данные интернет-хранилища не передаются на сервер при каждом запросе HTTP, и веб-сервер не может напрямую записать в интернет-хранилище.

Локальное хранилище и Сессионное хранилище

[править | править код]

Интернет-хранилище предлагает две различных области: локальное хранилище (localStorage) и сессионное хранилище (sessionStorage), которые различаются по своим объёмам и времени жизни. Данные размещаются в отдельное для каждого домена локальное хранилище (оно доступно для всех скриптов из домена, который первоначально добавил данные) и сохраняются после закрытия браузера. Сессия сохраняется по принципу одна страница - одно окно и ограничивается жизнью данного окна, то есть для каждого открытого окна создаётся новая сессия, которая прекращает своё существование при закрытии окна и не зависит от домена, открывшего её. Сохранение сессии предназначено для предоставления отдельных экземпляров одного и того же веб-приложения для работы в разных окнах, не мешая друг другу[5]. В случае с куки подобное становится крайне затруднительно или даже невозможно.

Интерфейс и модель данных

[править | править код]

Интернет-хранилище в настоящее время предоставляет программный интерфейс лучше, чем куки. Интерфейс представляет собой ассоциативный массив модели данных, где ключи и значения являются строками. Дополнительный API для доступа к структурированным данным на основе SQL находится на рассмотрении рабочей группы W3C.

Подобные технологии

[править | править код]

Примечания

[править | править код]
  1. ↑ sessionStorage и localStorage. http://msdn.microsoft.com/ru-ru/library/cc197062(v=VS.85).aspx Архивная копия от 1 января 2012 на Wayback Machine
  2. ↑ Введение в хранилище HTML5 — http://htmlbook.ru/html5/storage Архивная копия от 31 декабря 2011 на Wayback Machine
  3. ↑ Поддержка HTML5-хранилища — http://htmlbook.ru/html5/storage Архивная копия от 31 декабря 2011 на Wayback Machine
  4. ↑ Знакомство с хранилищем DOM. Дата обращения: 7 января 2012. Архивировано 1 января 2012 года.
  5. ↑ Знакомство с хранилищем DOM. Дата обращения: 7 января 2012. Архивировано 1 января 2012 года.

Ссылки

[править | править код]
Источник — https://ru.wikipedia.org/w/index.php?title=Web_Storage&oldid=139728418