diff options
Diffstat (limited to 'files/ru/conflicting/web/api/web_storage_api/index.html')
| -rw-r--r-- | files/ru/conflicting/web/api/web_storage_api/index.html | 368 |
1 files changed, 368 insertions, 0 deletions
diff --git a/files/ru/conflicting/web/api/web_storage_api/index.html b/files/ru/conflicting/web/api/web_storage_api/index.html new file mode 100644 index 0000000000..b63a374c8c --- /dev/null +++ b/files/ru/conflicting/web/api/web_storage_api/index.html @@ -0,0 +1,368 @@ +--- +title: DOM Storage guide +slug: Web/Guide/API/DOM/Storage +translation_of: Web/API/Web_Storage_API +translation_of_original: Web/Guide/API/DOM/Storage +--- +<h2 id="sect1"> </h2> + +<p>DOM хранилище (DOM Storage) - это название для набора инструментов, <a href="http://www.whatwg.org/specs/web-apps/current-work/#storage">относящихся к хранилищам</a>, впервые представленных в спецификации <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/" title="http://www.whatwg.org/specs/web-apps/current-work/">Web Applications 1.0</a>, и выделенных теперь в отдельную специкацию <a class="external" href="http://dev.w3.org/html5/webstorage/" title="http://dev.w3.org/html5/webstorage/">W3C Web Storage</a>. DOM хранилище было разработано с целью предоставления альтернативы хранению информации в кукисах. Предполагается, что DOM хранилище предоставляет больше объема, оно более защищено и легче в использовании. Впервые оно было представлено в браузерах <a href="/en-US/docs/Firefox_2_for_developers" title="Firefox_2_for_developers">Firefox 2</a> и <a class="external" href="http://developer.apple.com/safari/library/documentation/iPhone/Conceptual/SafariJSDatabaseGuide/Name-ValueStorage/Name-ValueStorage.html" title="http://developer.apple.com/safari/library/documentation/iPhone/Conceptual/SafariJSDatabaseGuide/Name-ValueStorage/Name-ValueStorage.html">Safari 4</a>.</p> + +<div class="note"><strong>Заметка:</strong> DOM хранилище - это не то же самое, что <a href="/en-US/docs/Storage" title="Storage">mozStorage</a> (Mozilla's XPCOM interfaces to SQLite) или <a href="/en-US/docs/Session_store_API" title="Session_store_API">Session store API</a> (утилита <a href="/en-US/docs/XPCOM" title="XPCOM">XPCOM</a> - хранилище для использования в расширениях).</div> + +<div class="note"> +<p><strong>Заметка:</strong> Эта статья скоро будет сильно переработана. В<span style="line-height: 1.5;">место того, чтобы хранить всю информацию на одной странице, она будет</span><span style="line-height: 1.5;"> разбита на несколько статей, каждая из которых будет описывать разные </span><span style="line-height: 1.5;">API хранилища. Отдельная статья, помогающая разобраться в разных API, будет также добавлена.</span></p> +</div> + +<h2 id="Описание">Описание</h2> + +<p>Механизм DOM хранилища - средство, благодаря которому можно безопасно хранить и позже извлекать пары "ключ / значение". Целью этого является обеспечение комплексного средства, с помощью которого можно разрабатывать интерактивные приложения(включая приложения с продвинутыми возможностями, такими как возможность работать "автономно"("offline") в течение длительных периодов времени).</p> + +<p>Браузеры на основе Mozilla, Internet Explorer 8 +, Safari 4 + и Chrome обеспечивают рабочую реализацию спецификации DOM хранилища. (В случае, если нужна кросс-браузерная поддержка функциональности, включая более старые версии IE, будет полезно отметить, что IE также имеет подобную легаси функциональность под названием "<a href="http://msdn.microsoft.com/en-us/library/ms531424(VS.85).aspx">USERDATA поведение</a>", которая дополненяет DOM хранилище IE в IE8.)</p> + +<p>DOM хранилище удобно, потому что нет других хороших способов хранения разумных объемов данных за любой период времени, встроенных в браузер. <a href="http://en.wikipedia.org/wiki/HTTP_cookie">Кукисы </a>ограничены в количестве хранимой информации и не обеспечивают поддержку для организации постоянных данных, а другие методы (например, <a href="http://www.macromedia.com/support/documentation/en-US/docs/flashplayer/help/help02.html">флэш-локальное хранилище</a>) требуют плагина.</p> + +<p>Одним из первых известных приложений, использующих новые функциональные возможности DOM хранилища(в дополнение к USERDATA поведения в Internet Explorer) было <a href="http://aaronboodman.com/halfnote/">halfnote </a>(приложение для заметок), написанное <a href="http://aaronboodman.com/">Аароном Будменом</a>. В своем приложении, Аарон одновременно сохранял заметки на сервере (когда/если Интернет-подключение был доступно) и локального хранилища данных(в обратном случае). Это дало возможность пользователю смело писать резервные копии заметок даже при нерегулярном подключении к Интернету.</p> + +<p>Хотя идея и реализация halfnote были сравнительно простыми, создание halfnote показывает возможность для нового поколения веб-приложений, которые можно использовать как в онлайн-, так и оффлайн- режиме.</p> + +<h2 id="Связь">Связь</h2> + +<p>Ниже приведены глобальные объекты, которые существуют как свойства каждого объекта <span style="line-height: 1.5;"> </span><code style="line-height: 1.5;"><a href="/en-US/docs/DOM/window" style="line-height: 1.5;" title="DOM/window">window</a></code><span style="line-height: 1.5;">. Это означает, что они могут быть доступны как </span><code style="font-style: normal;">sessionStorage</code> <span style="line-height: 1.5;">или </span><span style="font-family: 'Courier New', 'Andale Mono', monospace; line-height: 1.5;">window.sessionStorage</span><span style="line-height: 1.5;">. (Это важно, потому что вы можете использовать фреймы(IFrames) для хранения или доступа, дополнительные данные кроме того, что сразу же включено на странице.)</span></p> + +<h3 id="Storage"><code>Storage</code></h3> + +<p>Это конструктор<span style="line-height: 1.5;">(</span><code style="font-style: normal; line-height: 1.5;">Storage</code><span style="line-height: 1.5;">) </span><span style="line-height: 1.5;">для всех экземпляров </span><span style="line-height: 1.5;">Storage </span><span style="line-height: 1.5;">(</span><code style="font-style: normal; line-height: 1.5;">sessionStorage</code><span style="line-height: 1.5;"> и </span><code style="font-style: normal; line-height: 1.5;">globalStorage[location.hostname]</code>).</p> + +<p><span style="line-height: 1.5;">С</span><span style="line-height: 1.5;">охранение </span><code style="font-style: normal; line-height: 1.5;">Storage.prototype.removeKey = function(key){ this.removeItem(this.key(key)) }</code><span style="line-height: 1.5;"> будет доступно через </span><code style="font-style: normal; line-height: 1.5;">localStorage.removeKey</code><span style="line-height: 1.5;"> и </span><code style="font-style: normal; line-height: 1.5;">sessionStorage.removeKey</code><span style="line-height: 1.5;">.</span></p> + +<p>Единицы <code>globalStorage</code> являются экземплярами <span style="font-family: 'Courier New', 'Andale Mono', monospace; line-height: 1.5;">StorageObsolete,</span> а <span style="line-height: 1.5;">не </span><code style="font-style: normal; line-height: 1.5;">Storage</code><span style="line-height: 1.5;">.</span></p> + +<p><code>Storage</code> определен в WhatWG <a class="external" href="http://dev.w3.org/html5/webstorage/#storage-0" title="http://dev.w3.org/html5/webstorage/#storage-0">Storage Interface</a> следующим образом:</p> + +<pre class="eval">interface <dfn>Storage</dfn> { + readonly attribute unsigned long <a class="external" href="http://dev.w3.org/html5/webstorage/#dom-storage-length" title="dom-Storage-length">length</a>; + [IndexGetter] DOMString <a class="external" href="http://dev.w3.org/html5/webstorage/#dom-storage-key" title="dom-Storage-key">key</a>(in unsigned long index); + [NameGetter] DOMString <a class="external" href="http://dev.w3.org/html5/webstorage/#dom-storage-getitem" title="dom-Storage-getItem">getItem</a>(in DOMString key); + [NameSetter] void <a class="external" href="http://dev.w3.org/html5/webstorage/#dom-storage-setitem" title="dom-Storage-setItem">setItem</a>(in DOMString key, in DOMString data); + [NameDeleter] void <a class="external" href="http://dev.w3.org/html5/webstorage/#dom-storage-removeitem" title="dom-Storage-removeItem">removeItem</a>(in DOMString key); + void <a class="external" href="http://dev.w3.org/html5/webstorage/#dom-storage-clear" title="dom-Storage-clear">clear</a>(); +}; +</pre> + +<div class="note"><strong>Заметка: </strong>Несмотря на то, что значения доступны для чтения и записи через стандартные способы Javascript, рекомендуется использование <span style="line-height: 1.5;">getItem и setItem.</span></div> + +<div class="note"><strong>Заметка:</strong> Обратите внимание, что любые данные, которые хранятся в любом из хранилищ, описанных на этой странице, преобразуются в строку, используя метод<span style="font-family: 'Courier New', 'Andale Mono', monospace; line-height: 1.5;">.toString</span><span style="line-height: 1.5;">. перед тем, как сохранить значение. Попытка сохранить объект приведет к сохранению строки </span><code style="font-style: italic;">"[object Object]"</code> <span style="line-height: 1.5;">вместо объекта или его JSON </span><span style="line-height: 1.5;">представления</span><span style="line-height: 1.5;">. Самым лучшим и распространенным способом сохранения объектов в формате строки является использование п</span><span style="line-height: 1.5;">редоставляемых браузером </span><span style="line-height: 1.5;">методов JSON для парсинга</span><span style="line-height: 1.5;"> </span><span style="line-height: 1.5;">и сериализации объектов.</span></div> + +<h3 id="sessionStorage"><code>sessionStorage</code></h3> + +<p>Это глобальный объект <span style="line-height: 1.5;">(</span><code style="font-style: normal; line-height: 1.5;">sessionStorage</code><span style="line-height: 1.5;">), который сохраняет значения, которые доступны в течение периода текущей сессии. Сессия страницы длится, пока браузер открыт, и восстанавливает свои значения после перегрузки страницы. Открытие страницы в новой вкладке или окне приведет к созданию новой сессии для этой страницы.</span></p> + +<pre class="brush:js">// Сохранить данные в текущем хранилизе сессий +sessionStorage.setItem("username", "John"); + +// Получить значения сохраненного значения +alert( "username = " + sessionStorage.getItem("username")); +</pre> + +<p>Объект <code>sessionStorage</code> наиболее полезен для хранения временных данных, которые должны быть восстановлены, если страница браузер была случайно перегружена.</p> + +<p><strong>Примеры:</strong></p> + +<p>Автоматическое сохранение содержимого тестового поля, и если страница была случайно перегружена, то данные не будут потеряны.</p> + +<pre class="brush:js"> // Получить значение текстового поля, которое мы собираемся отслеживать + var field = document.getElementById("field"); + + // Проверяем, что значение поля autosave существует + // (это будет происходить при случайной перезагрузке страницы) + if (sessionStorage.getItem("autosave")) { + // Восстановить значение тестового поля + field.value = sessionStorage.getItem("autosave"); + } + + // Прослушивать изменения значения текстового поля + field.addEventListener("change", function() { + // И сохранить результаты в объект хранилища сессий + sessionStorage.setItem("autosave", field.value); + }); +</pre> + +<p><strong>Больше информации:</strong></p> + +<ul> + <li><a class="external" href="http://dev.w3.org/html5/webstorage/#the-sessionstorage-attribute" title="http://dev.w3.org/html5/webstorage/#the-sessionstorage-attribute">sessionStorage specification</a></li> +</ul> + +<h3 id="localStorage" name="localStorage"><code>localStorage</code></h3> + +<p><code>localStorage</code> - это то же самое, что и<code> {{ Anch("sessionStorage") }},</code> поддерживает правила единого происхождения(same-origin rules), но хранение данных постоянно. <code>localStorage</code> был представлен в Firefox 3.5.</p> + +<div class="note"><strong>Заметка:</strong> Когда браузер переходит в частный режим браузера(<span style="line-height: 1.5;">private browsing mode), то новая, временная база данных создается для хранения данных локального хранилища; эта база данных очищается и удаляется, как только частный режим браузера выключается.</span></div> + +<h4 id="Совместимость">Совместимость</h4> + +<p>Объекты <code>Storage -</code> относительно недавнее дополнение стандарта. Это означает, что они не обязательно должны быть реализованы во всех браузерах. Проблему можно решить с помощью включения следующего куска кода в начале вашего скрипта, позволяя использовать объект <code>localStorage</code> в реализациях, которые нативно не поддерживают его.</p> + +<p>Следующий алгоритм - это точная имитация объекта <code style="font-style: normal; line-height: 1.5;">localStorage,</code> но использует куки.</p> + +<pre class="brush:js">if (!window.localStorage) { + Object.defineProperty(window, "localStorage", new (function () { + var aKeys = [], oStorage = {}; + Object.defineProperty(oStorage, "getItem", { + value: function (sKey) { return sKey ? this[sKey] : null; }, + writable: false, + configurable: false, + enumerable: false + }); + Object.defineProperty(oStorage, "key", { + value: function (nKeyId) { return aKeys[nKeyId]; }, + writable: false, + configurable: false, + enumerable: false + }); + Object.defineProperty(oStorage, "setItem", { + value: function (sKey, sValue) { + if(!sKey) { return; } + document.cookie = escape(sKey) + "=" + escape(sValue) + "; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/"; + }, + writable: false, + configurable: false, + enumerable: false + }); + Object.defineProperty(oStorage, "length", { + get: function () { return aKeys.length; }, + configurable: false, + enumerable: false + }); + Object.defineProperty(oStorage, "removeItem", { + value: function (sKey) { + if(!sKey) { return; } + document.cookie = escape(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/"; + }, + writable: false, + configurable: false, + enumerable: false + }); + this.get = function () { + var iThisIndx; + for (var sKey in oStorage) { + iThisIndx = aKeys.indexOf(sKey); + if (iThisIndx === -1) { oStorage.setItem(sKey, oStorage[sKey]); } + else { aKeys.splice(iThisIndx, 1); } + delete oStorage[sKey]; + } + for (aKeys; aKeys.length > 0; aKeys.splice(0, 1)) { oStorage.removeItem(aKeys[0]); } + for (var aCouple, iKey, nIdx = 0, aCouples = document.cookie.split(/\s*;\s*/); nIdx < aCouples.length; nIdx++) { + aCouple = aCouples[nIdx].split(/\s*=\s*/); + if (aCouple.length > 1) { + oStorage[iKey = unescape(aCouple[0])] = unescape(aCouple[1]); + aKeys.push(iKey); + } + } + return oStorage; + }; + this.configurable = false; + this.enumerable = true; + })()); +} +</pre> + +<div class="note"><strong>Note:</strong> The maximum size of data that can be saved is severely restricted by the use of cookies. With this algorithm, use the functions <code>localStorage.setItem()</code> and <code>localStorage.removeItem()</code> to add, change, or remove a key. The use of methods <code>localStorage.yourKey = yourValue;</code> and <code>delete localStorage.yourKey;</code> to set or delete a key <strong>is not a secure way with this code</strong>. You can also change its name and use it only to manage a document's cookies regardless of the localStorage object.</div> + +<div class="note"><strong>Note:</strong> By changing the string <code style="background: #ccc;">"; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/"</code> to: <code style="background: #ccc;">"; path=/"</code> (and changing the object's name), this will become a <code>sessionStorage</code> polyfill rather than a <code>localStorage</code> polyfill. However, this implementation will share stored values across browser tabs and windows (and will only be cleared when all browser windows have been closed), while a fully-compliant <span style="font-family: 'Courier New', 'Andale Mono', monospace; line-height: normal;">sessionStorage</span><span style="line-height: 1.5em;"> implementation restricts stored values to the current browsing context only.</span></div> + +<p>Here is another, less exact, imitation of the <code>localStorage</code> object. It is simpler than the previous one, but it is compatible with old browsers, like Internet Explorer < 8 (<strong>tested and working even in Internet Explorer 6</strong>). It also makes use of cookies.</p> + +<pre class="brush:js">if (!window.localStorage) { + window.localStorage = { + getItem: function (sKey) { + if (!sKey || !this.hasOwnProperty(sKey)) { return null; } + return unescape(document.cookie.replace(new RegExp("(?:^|.*;\\s*)" + escape(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=\\s*((?:[^;](?!;))*[^;]?).*"), "$1")); + }, + key: function (nKeyId) { + return unescape(document.cookie.replace(/\s*\=(?:.(?!;))*$/, "").split(/\s*\=(?:[^;](?!;))*[^;]?;\s*/)[nKeyId]); + }, + setItem: function (sKey, sValue) { + if(!sKey) { return; } + document.cookie = escape(sKey) + "=" + escape(sValue) + "; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/"; + this.length = document.cookie.match(/\=/g).length; + }, + length: 0, + removeItem: function (sKey) { + if (!sKey || !this.hasOwnProperty(sKey)) { return; } + document.cookie = escape(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/"; + this.length--; + }, + hasOwnProperty: function (sKey) { + return (new RegExp("(?:^|;\\s*)" + escape(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=")).test(document.cookie); + } + }; + window.localStorage.length = (document.cookie.match(/\=/g) || window.localStorage).length; +} +</pre> + +<div class="note"><strong>Note:</strong> The maximum size of data that can be saved is severely restricted by the use of cookies. With this algorithm, use the functions <code>localStorage.getItem()</code>, <code>localStorage.setItem()</code>, and <code>localStorage.removeItem()</code> to get, add, change, or remove a key. The use of method <code>localStorage.yourKey</code> in order to get, set, or delete a key <strong>is not permitted with this code</strong>. You can also change its name and use it only to manage a document's cookies regardless of the localStorage object.</div> + +<div class="note"><strong>Note:</strong> By changing the string <code style="background: #ccc;">"; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/"</code> to: <code style="background: #ccc;">"; path=/"</code> (and changing the object's name), this will become a <code>sessionStorage</code> polyfill rather than a <code>localStorage</code> polyfill. However, this implementation will share stored values across browser tabs and windows (and will only be cleared when all browser windows have been closed), while a fully-compliant <span style="font-family: 'Courier New', 'Andale Mono', monospace; line-height: normal;">sessionStorage</span><span style="line-height: 1.5em;"> implementation restricts stored values to the current browsing context only.</span></div> + +<h4 id="Compatibility_and_relation_with_globalStorage">Compatibility and relation with globalStorage</h4> + +<p class="note"><code>localStorage</code> is also the same as <code>globalStorage[location.hostname]</code>, with the exception of being scoped to an HTML5 origin (scheme + hostname + non-standard port) and <code>localStorage</code> being an instance of <code>Storage</code> as opposed to <code>globalStorage[location.hostname]</code> being an instance of <code>StorageObsolete</code> which is covered below. For example, <a class="external" href="http://example.com" rel="freelink">http://example.com</a> is not able to access the same <code>localStorage</code> object as <a class="link-https" href="https://example.com" rel="freelink">https://example.com</a> but they can access the same <code>globalStorage</code> item. <code>localStorage</code> is a standard interface while <code>globalStorage</code> is non-standard so you shouldn't rely on these.</p> + +<p>Please note that setting a property on <code>globalStorage[location.hostname]</code> does <strong>not</strong> set it on <code>localStorage</code> and extending <code>Storage.prototype</code> does not affect <code>globalStorage</code> items; only extending <code>StorageObsolete.prototype</code> does.</p> + +<h3 id="globalStorage"><code>globalStorage</code></h3> + +<div>{{ Non-standard_header }}{{ obsolete_header("13.0") }}</div> + +<p><code>globalStorage </code>is obsolete since Gecko 1.9.1 (Firefox 3.5) and unsupported since Gecko 13 (Firefox 13). Just use<code> {{ Anch("localStorage") }} </code>instead. This proposed addition to HTML5 has been removed from the HTML5 specification in favor of<code> {{ Anch("localStorage") }}</code>, which is implemented in Firefox 3.5. This is a global object (<code>globalStorage</code>) that maintains multiple private storage areas that can be used to hold data over a long period of time (e.g., over multiple pages and browser sessions).</p> + +<div class="warning">Note: <code>globalStorage</code> is not a <code>Storage</code> instance, but a <code>StorageList</code> instance containing <code>StorageObsolete</code> instances.</div> + +<pre class="eval deki-transform">// Save data that only scripts on the mozilla.org domain can access +globalStorage['mozilla.org'].setItem("snippet", "<b>Hello</b>, how are you?"); +</pre> + +<p>Specifically, the <code>globalStorage</code> object provides access to a number of different storage objects into which data can be stored. For example, if we were to build a web page that used <code>globalStorage</code> on this domain (developer.mozilla.org) we'd have the following storage object available to us:</p> + +<ul> + <li><code>globalStorage{{ mediawiki.external('\'developer.mozilla.org\'') }}</code> - All web pages within the developer.mozilla.org sub-domain can both read and write data to this storage object.</li> +</ul> + +<p><strong>Examples:</strong></p> + +<p>All of these examples require that you have a script inserted (with each of the following code) in every page that you want to see the result on.</p> + +<p>Remember a user's username for the particular sub-domain that is being visited:</p> + +<pre class="eval deki-transform"> globalStorage['developer.mozilla.org'].setItem("username", "John"); +</pre> + +<p>Keep track of the number of times that a user visits all pages of your domain:</p> + +<pre class="eval deki-transform"> // parseInt must be used since all data is stored as a string + globalStorage['mozilla.org'].setItem("visits", parseInt(globalStorage['mozilla.org'].getItem("visits") || 0 ) + 1); +</pre> + +<h2 id="Расположение_хранилища_и_очищение_данных">Расположение хранилища и очищение данных</h2> + +<p>In Firefox the DOM storage data is stored in the <a class="external" href="http://kb.mozillazine.org/Webappsstore.sqlite" title="http://kb.mozillazine.org/Webappsstore.sqlite">webappsstore.sqlite file</a> in the profile folder (there's also chromeappsstore.sqlite file used to store browser's own data, <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=592990" title="https://bugzilla.mozilla.org/show_bug.cgi?id=592990">notably for the start page - about:home</a>, but potentially for other internal pages with "about:" URLs).</p> + +<ul> + <li>DOM Storage can be cleared via "Tools -> Clear Recent History -> Cookies" when Time range is "Everything" (via nsICookieManager::removeAll) + <ul> + <li>But not when another time range is specified: (<a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=527667" title="https://bugzilla.mozilla.org/show_bug.cgi?id=527667">bug 527667</a>)</li> + <li>Does not show up in Tools -> Options -> Privacy -> Remove individual cookies (<a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=506692" title="https://bugzilla.mozilla.org/show_bug.cgi?id=506692">bug 506692</a>)</li> + </ul> + </li> + <li>DOM Storage is <strong>not</strong> cleared via Tools -> Options -> Advanced -> Network -> Offline data -> Clear Now.</li> + <li>Doesn't show up in the "Tools -> Options -> Advanced -> Network -> Offline data" list, unless the site also uses the offline cache. If the site does appear in that list, its DOM storage data is removed along with the <a href="/en-US/docs/HTML/Using_the_application_cache" title="Offline resources in Firefox">offline cache</a> when clicking the Remove button.</li> +</ul> + +<p>See also <a href="/en-US/docs/HTML/Using_the_application_cache#Storage_location_and_clearing_the_offline_cache" title="Offline resources in Firefox#Storage location and clearing the offline cache">clearing offline resources cache</a>.</p> + +<h2 id="Больше_информации">Больше информации</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/webstorage/" title="http://www.w3.org/TR/webstorage/">Web Storage</a> (W3C Web Apps Working Group)</li> + <li><a class="external" href="http://kb.mozillazine.org/Dom.storage.enabled">Enable/Disable DOM Storage in Firefox or SeaMonkey</a></li> +</ul> + +<h2 id="Примеры">Примеры</h2> + +<ul> + <li><a class="external" href="http://www.diveintojavascript.com/tutorials/web-storage-tutorial-creating-an-address-book-application" title="JavaScript Web Storage Tutorial: Creating an Address Book Application">JavaScript Web Storage Tutorial: Creating an Address Book Application</a> - Hands-on tutorial describing how to use the Web Storage API by creating a simple address book application.</li> + <li><a class="external" href="http://hacks.mozilla.org/2010/01/offline-web-applications/" title="http://hacks.mozilla.org/2010/01/offline-web-applications/">offline web applications</a> at hacks.mozilla.org - Showcases an offline app demo and explains how it works.</li> + <li><a class="external" href="http://noteboard.eligrey.com/" title="http://noteboard.eligrey.com/">Noteboard</a> - Note writing application that stores all data locally.</li> + <li><a class="external" href="http://github.com/eligrey/jData-host" title="http://github.com/eligrey/jData-host">jData</a> - A shared localStorage object interface that can be accessed by any website on the internet and works on Firefox 3+, Webkit 3.1.2+ nightlies, and IE8. Think of it as pseudo-globalStorage[""] but write access needs user confirmation.</li> + <li><a class="external" href="http://codebase.es/test/webstorage.html" title="http://codebase.es/test/webstorage.html">HTML5 localStorage example</a> - Very simple and easy to understand example of localStorage. Saves and retrieves texts and shows a list of saved items. Tested in Firefox 3 or higher.</li> + <li><a class="external" href="http://upload.jonathanwilsson.com/html5/sessionstorage.php" title="http://upload.jonathanwilsson.com/html5/sessionstorage.php">HTML5 Session Storage</a> - A very simple example of session storage. Also includes a example on local storage. Tested in Firefox 3.6 or higher.</li> + <li><a class="external" href="http://channy.creation.net/work/firefox/domstorage/"><strike>Basic DOMStorage Examples</strike></a><strike> - Broken in Firefox 3 and up due to use of globalStorage on one domain level up from the current domain which is not allowed in Firefox 3.</strike></li> + <li><a class="external" href="http://aaronboodman.com/halfnote/"><strike>halfnote</strike></a><strike> - (displaying broken in Firefox 3) Note writing application that uses DOM Storage.</strike></li> +</ul> + +<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>localStorage</td> + <td>4</td> + <td>3.5</td> + <td>8</td> + <td>10.50</td> + <td>4</td> + </tr> + <tr> + <td>sessionStorage</td> + <td>5</td> + <td>2</td> + <td>8</td> + <td>10.50</td> + <td>4</td> + </tr> + <tr> + <td>globalStorage</td> + <td>{{ CompatNo }}</td> + <td>2-13</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatNo }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>2.1</td> + <td>{{ CompatUnknown }}</td> + <td>8</td> + <td>11</td> + <td>iOS 3.2</td> + </tr> + </tbody> +</table> +</div> + +<p>All browsers have varying capacity levels for both localStorage and sessionStorage. Here is a <a class="external" href="http://dev-test.nemikor.com/web-storage/support-test/" title="http://dev-test.nemikor.com/web-storage/support-test/">detailed rundown of all the storage capacities for various browsers</a>.</p> + +<div class="note"> +<p><strong>Note: </strong>since iOS 5.1, Safari Mobile stores localStorage data in the cache folder, which is subject to occasional clean up, at the behest of the OS, typically if space is short.</p> +</div> + +<h2 id="Полезные_ссылки">Полезные ссылки</h2> + +<ul> + <li><a class="external" href="http://en.wikipedia.org/wiki/HTTP_cookie">HTTP cookies</a> (<code><a href="/en-US/docs/DOM/document.cookie" title="DOM/document.cookie">document.cookie</a></code>)</li> + <li><a class="external" href="http://www.macromedia.com/support/documentation/en-US/docs/flashplayer/help/help02.html">Flash Local Storage</a></li> + <li><a class="external" href="http://msdn2.microsoft.com/en-us/library/ms531424.aspx">Internet Explorer userData behavior</a></li> + <li><a href="/en-US/docs/XPCOM_Interface_Reference/nsIDOMStorageEventObsolete" title="XPCOM Interface Reference/nsIDOMStorageEventObsolete">nsIDOMStorageEventObsolete</a></li> + <li><a href="/en-US/docs/DOM/event/StorageEvent" title="DOM/Event/StorageEvent">StorageEvent</a></li> + <li><a href="/en-US/docs/DOM/Storage/Implementation" title="/en-US/docs/DOM/Storage/Implementation">Implementation Details</a></li> +</ul> + +<div>{{ HTML5ArticleTOC }}</div> |