diff options
Diffstat (limited to 'files/ru/web/api/storage')
-rw-r--r-- | files/ru/web/api/storage/clear/index.html | 121 | ||||
-rw-r--r-- | files/ru/web/api/storage/getitem/index.html | 131 | ||||
-rw-r--r-- | files/ru/web/api/storage/index.html | 164 | ||||
-rw-r--r-- | files/ru/web/api/storage/key/index.html | 128 | ||||
-rw-r--r-- | files/ru/web/api/storage/length/index.html | 122 | ||||
-rw-r--r-- | files/ru/web/api/storage/localstorage/index.html | 145 | ||||
-rw-r--r-- | files/ru/web/api/storage/removeitem/index.html | 70 | ||||
-rw-r--r-- | files/ru/web/api/storage/setitem/index.html | 130 |
8 files changed, 1011 insertions, 0 deletions
diff --git a/files/ru/web/api/storage/clear/index.html b/files/ru/web/api/storage/clear/index.html new file mode 100644 index 0000000000..ca829dae1b --- /dev/null +++ b/files/ru/web/api/storage/clear/index.html @@ -0,0 +1,121 @@ +--- +title: Storage.clear() +slug: Web/API/Storage/clear +translation_of: Web/API/Storage/clear +--- +<p>{{APIRef("Web Storage API")}}</p> + +<p>Метод <code>clear()</code> интерфейса {{domxref("Storage")}} удалит все значения из хранилища.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="brush: js"><em>storage</em>.clear();</pre> + +<h3 id="Параметры">Параметры</h3> + +<p><em>Метод не принимает параметры.</em></p> + +<h3 id="Возвращаемое_значение">Возвращаемое значение</h3> + +<p><em>Метод не возвращает значение.</em></p> + +<h2 id="Пример">Пример</h2> + +<p>Следующая функция создает 3 записи в локальном хранилище, после этого все значения удаляются с помощью метода <code>clear()</code>.</p> + +<pre class="brush: js">function populateStorage() { + localStorage.setItem('bgcolor', 'red'); + localStorage.setItem('font', 'Helvetica'); + localStorage.setItem('image', 'myCat.png'); + + localStorage.clear(); +}</pre> + +<div class="note"> +<p><strong>Примечание</strong>: Чтобы вживую посмотреть на работу функции, посетите страницу демонстрации <a href="https://github.com/mdn/web-storage-demo">Web Storage</a>.</p> +</div> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + <tr> + <td>{{SpecName('Web Storage', '#dom-storage-clear', 'clear()')}}</td> + <td>{{Spec2('Web Storage')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Поддержка_браузерами">Поддержка браузерами</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Характеристика</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> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Характеристика</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>Все браузеры имеют различный уровень объема для localStorage и sessionStorage. Здесь <a href="http://dev-test.nemikor.com/web-storage/support-test/" title="http://dev-test.nemikor.com/web-storage/support-test/">подробное описание объема хранилищ для разных браузеров</a>.</p> + +<div class="note"> +<p><strong>Примечание:</strong> Начиная с версии iOS 5.1, Safari Mobile хранит данные <code>localStorage</code> в папке cache, которая периодически подлежит очистке по требованию ОС, как правило при недостаточном количестве свободного места.</p> +</div> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<p><a href="/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Using the Web Storage API</a></p> diff --git a/files/ru/web/api/storage/getitem/index.html b/files/ru/web/api/storage/getitem/index.html new file mode 100644 index 0000000000..1780f54ec3 --- /dev/null +++ b/files/ru/web/api/storage/getitem/index.html @@ -0,0 +1,131 @@ +--- +title: Storage.getItem() +slug: Web/API/Storage/getItem +translation_of: Web/API/Storage/getItem +--- +<p>{{APIRef("Web Storage API")}}</p> + +<p>Если в метод <code>getItem()</code> интерфейса {{domxref("Storage")}} передать ключ в качестве параметра, то метод вернет значение, лежащее в хранилище по указанному ключу.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">var <em>aValue</em> = <em>storage</em>.getItem(<em>названиеКлюча</em>); +</pre> + +<h3 id="Параметры">Параметры</h3> + +<dl> + <dt><font face="Consolas, Liberation Mono, Courier, monospace"><em>названиеКлюча</em></font></dt> + <dd>Является строкой {{domxref("DOMString")}}, содержащей название ключа, по которому получается значение из хранилища.</dd> +</dl> + +<h3 id="Возвращаемые_значения">Возвращаемые значения</h3> + +<p>Является строкой {{domxref("DOMString")}}, содержащей значение для соответствующего ключа. Если ключ не существует, то будет возвращено значение <code>null</code>.</p> + +<h2 id="Пример">Пример</h2> + +<p>Следующая функция получает 3 значения из локального хранилища, после этого они используются для установки стилей на странице.</p> + +<pre class="brush: js">function setStyles() { + var currentColor = localStorage.getItem('bgcolor'); + var currentFont = localStorage.getItem('font'); + var currentImage = localStorage.getItem('image'); + + document.getElementById('bgcolor').value = currentColor; + document.getElementById('font').value = currentFont; + document.getElementById('image').value = currentImage; + + htmlElem.style.backgroundColor = '#' + currentColor; + pElem.style.fontFamily = currentFont; + imgElem.setAttribute('src', currentImage); +}</pre> + +<div class="note"> +<p><strong>Примечание</strong>: Чтобы вживую посмотреть на работу функции, посетите страницу демонстрации <a href="https://github.com/mdn/web-storage-demo">Web Storage</a>.</p> +</div> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + <tr> + <td>{{SpecName('Web Storage', '#dom-storage-getitem', 'getItem()')}}</td> + <td>{{Spec2('Web Storage')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Поддержка_браузерами">Поддержка браузерами</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Характеристика</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> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Характеристика</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>Все браузеры имеют различный уровень объема для localStorage и sessionStorage. Здесь <a href="http://dev-test.nemikor.com/web-storage/support-test/" title="http://dev-test.nemikor.com/web-storage/support-test/">подробное описание объема хранилищ для разных браузеров</a>.</p> + +<div class="note"> +<p><strong>Примечание:</strong> Начиная с версии iOS 5.1, Safari Mobile хранит данные <code>localStorage</code> в папке cache, которая периодически подлежит очистке по требованию ОС, как правило при недостаточном количестве свободного места</p> +</div> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<p><a href="/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Using the Web Storage API</a></p> diff --git a/files/ru/web/api/storage/index.html b/files/ru/web/api/storage/index.html new file mode 100644 index 0000000000..662d4c1057 --- /dev/null +++ b/files/ru/web/api/storage/index.html @@ -0,0 +1,164 @@ +--- +title: Storage +slug: Web/API/Storage +tags: + - API + - Interface + - NeedsTranslation + - Reference + - Storage + - Web Storage + - data +translation_of: Web/API/Storage +--- +<p>{{APIRef("Web Storage API")}}</p> + +<p><code>Интерфейс Storage</code> из Web Storage API предоставляет доступ для session storage или local storage для конкретного домена, позволяя вам к примеру добавлять, изменять или удалять сохранённые элементы данных.</p> + +<p>Если вы хотите управлять session storage для домена, вы вызываете {{domxref("Window.sessionStorage")}} метод; Если вы хотите управлять local storage домена, вы вызываете {{domxref("Window.localStorage")}}.</p> + +<h2 id="Свойства">Свойства</h2> + +<dl> + <dt>{{domxref("Storage.length")}} {{readonlyInline}}</dt> + <dd>Возвращает число, представляющее количество элементов в объекте <code>Storage</code>.</dd> +</dl> + +<h2 id="Методы">Методы</h2> + +<dl> + <dt>{{domxref("Storage.key()")}}</dt> + <dd>Приняв число n, метод вернёт имя n-ного ключа в Storage</dd> +</dl> + +<dl> + <dt>{{domxref("Storage.getItem()")}}</dt> + <dd>Приняв имя ключа, метод вернёт для него значение.</dd> + <dt>{{domxref("Storage.setItem()")}}</dt> + <dd>Приняв имя ключа и значение, метод добавит этот ключ в Storage или обновит его значение, если ключ уже существовал.</dd> + <dt>{{domxref("Storage.removeItem()")}}</dt> + <dd>Приняв имя ключа, метод удалит этот ключ из Storage</dd> + <dt>{{domxref("Storage.clear()")}}</dt> + <dd>При вызове метод удалит все ключи из Storage.</dd> +</dl> + +<h2 id="Примеры">Примеры</h2> + +<p>В данном примере мы получаем доступ к объекту Storage вызывая localStorage. Для начала мы проверяем содержит ли local storage элементы данных используя <code>!localStorage.getItem('bgcolor')</code>. Если да, мы вызываем функцию <code>setStyles()</code> которая получает элементы данных используя {{domxref("localStorage.getItem()")}} и использует их значения для обновления стилей на странице. Если нет, мы вызывает другую функцию, <code>populateStorage()</code>, которая использует {{domxref("localStorage.setItem()")}} что бы установить значения для элементов, потом вызываем <code>setStyles()</code>.</p> + +<pre class="brush: js notranslate">if(!localStorage.getItem('bgcolor')) { + populateStorage(); +} else { + setStyles(); +} + +function populateStorage() { + localStorage.setItem('bgcolor', document.getElementById('bgcolor').value); + localStorage.setItem('font', document.getElementById('font').value); + localStorage.setItem('image', document.getElementById('image').value); + + setStyles(); +} + +function setStyles() { + var currentColor = localStorage.getItem('bgcolor'); + var currentFont = localStorage.getItem('font'); + var currentImage = localStorage.getItem('image'); + + document.getElementById('bgcolor').value = currentColor; + document.getElementById('font').value = currentFont; + document.getElementById('image').value = currentImage; + + htmlElem.style.backgroundColor = '#' + currentColor; + pElem.style.fontFamily = currentFont; + imgElem.setAttribute('src', currentImage); +}</pre> + +<div class="note"> +<p><strong>Важно</strong>: Если хотите увидеть данный пример в работе, посмотрите наше <a href="https://mdn.github.io/dom-examples/web-storage/">Web Storage Demo</a>.</p> +</div> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Спецификации</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'webstorage.html#the-storage-interface', 'Storage')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<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> + </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>Все браузеры имеют различную вместимость для localStorage и sessionStorage. Вот <a class="external" href="http://dev-test.nemikor.com/web-storage/support-test/" title="http://dev-test.nemikor.com/web-storage/support-test/">подробное сравнение всех storage для различных браузеров</a>.</p> + +<div class="note"> +<p><strong>Важно: </strong>Начиная с iOS 5.1, Safari Mobile хранит данные localStorage в папке кэша, которая является объектом для периодических чисток по желанию OS, в основном из-за нехватки памяти.</p> +</div> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<p><a href="/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Используя Web Storage API</a></p> diff --git a/files/ru/web/api/storage/key/index.html b/files/ru/web/api/storage/key/index.html new file mode 100644 index 0000000000..f8ff0d97b5 --- /dev/null +++ b/files/ru/web/api/storage/key/index.html @@ -0,0 +1,128 @@ +--- +title: Storage.key() +slug: Web/API/Storage/key +tags: + - API + - Storage + - Web Storage + - Справка + - Хранилище +translation_of: Web/API/Storage/key +--- +<p>{{APIRef()}}</p> + +<p>Метод key() интерфейса {{domxref("Storage")}} получает числовое значение n и возвращает имя n-ого ключа из хранилища. Порядок ключей определяется браузером.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">var <em>aKeyName</em> = <em>storage</em>.key(<em>key</em>);</pre> + +<h3 id="Параметры">Параметры</h3> + +<dl> + <dt><em>Ключ</em></dt> + <dd>Целое нумерованное значение представляющее номер ключа, которого Вы хотите получить. Индексация начинается с нуля. </dd> +</dl> + +<h3 id="Возвращает">Возвращает</h3> + +<p>{{domxref("DOMString")}} , содержащий имя ключа.</p> + +<h2 id="Пример">Пример</h2> + +<p>Следующая функция перебирает все ключи из хранилища.</p> + +<pre class="brush: js">function forEachKey(callback) { + for (var i = 0; i < localStorage.length; i++) { + callback(localStorage.key(i)); + } +}</pre> + +<div class="note"> +<p><strong>Примечание</strong>: Реальный пример Вы можете увидеть на <a href="https://github.com/mdn/web-storage-demo">Web Storage Demo</a>.</p> +</div> + +<h2 id="Стандарты">Стандарты</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Стандарт</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + <tr> + <td>{{SpecName('Web Storage', '#dom-storage-key', 'key()')}}</td> + <td>{{Spec2('Web Storage')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<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> + </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>Все браузеры имеют различный уровень объема для localStorage и sessionStorage. Здесь вы найдете <a href="http://dev-test.nemikor.com/web-storage/support-test/" title="http://dev-test.nemikor.com/web-storage/support-test/">подробное описание объема хранилищ для разных браузеров</a>.</p> + +<div class="note"> +<p><strong>Примечание: </strong>начиная с версии iOS 5.1, Safari Mobile хранит данные localStorage в папке с кэшем, которая может быть случайно очищена по требованию OS, обычно это происходит, когда мало доступного места.</p> +</div> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<p><a href="/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Using the Web Storage API</a></p> diff --git a/files/ru/web/api/storage/length/index.html b/files/ru/web/api/storage/length/index.html new file mode 100644 index 0000000000..70722e9e11 --- /dev/null +++ b/files/ru/web/api/storage/length/index.html @@ -0,0 +1,122 @@ +--- +title: Storage.length +slug: Web/API/Storage/length +tags: + - API + - Storage + - Web Storage + - Справка +translation_of: Web/API/Storage/length +--- +<p>{{APIRef("Web Storage API")}}</p> + +<p>Свойство length интерфейса {{domxref("Storage")}} доступно только для чтения и возвращает число с количеством элементов, которые хранятся в объекте <span style="font-family: consolas,monaco,andale mono,monospace;">Storage</span> на данный момент.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">var <em>aLength</em> = <em>storage</em>.length;</pre> + +<h3 id="Возвращаемые_значения">Возвращаемые значения</h3> + +<p>Число</p> + +<h2 id="Пример">Пример</h2> + +<p>Следующая функция добавляет три элемента с данными в локальное хранилище для домена, на котором выполняется код и возвращает число элементов в хранилище:</p> + +<pre class="brush: js">function populateStorage() { + localStorage.setItem('bgcolor', 'yellow'); + localStorage.setItem('font', 'Helvetica'); + localStorage.setItem('image', 'cats.png'); + + localStorage.length; // return 3 +}</pre> + +<div class="note"> +<p><strong>Примечание</strong>: чтобы посмотреть выполнение кода вживую, посетите страницу <a href="https://github.com/mdn/web-storage-demo">Web Storage Demo</a>.</p> +</div> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + <tr> + <td>{{SpecName('Web Storage', '#dom-storage-length', 'length')}}</td> + <td>{{Spec2('Web Storage')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Характеристика</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> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Характеристика</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>Все браузеры имют различный уровень объема для localStorage и sessionStorage. Здесь <a class="external" href="http://dev-test.nemikor.com/web-storage/support-test/" title="http://dev-test.nemikor.com/web-storage/support-test/">подробное описание объема хранилищ для разных браузеров</a>.</p> + +<div class="note"> +<p><strong>Примечание: </strong>начиная с версии iOS 5.1, Safari Mobile хранит данные localStorage в папке с кэшем, которая может быть очищена случайно по требованию OS, обычно это происходит, когда мало доступного места.</p> +</div> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<p><a href="/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Использование Web Storage API</a></p> diff --git a/files/ru/web/api/storage/localstorage/index.html b/files/ru/web/api/storage/localstorage/index.html new file mode 100644 index 0000000000..e0a2cd72e7 --- /dev/null +++ b/files/ru/web/api/storage/localstorage/index.html @@ -0,0 +1,145 @@ +--- +title: LocalStorage +slug: Web/API/Storage/LocalStorage +translation_of: Web/API/Window/localStorage +--- +<p><code>localStorage</code> это аналог <code><a href="/en-US/docs/Web/API/sessionStorage">sessionStorage</a></code>, с некоторыми same-origin правилами, но значения хранятся постоянно (в отличии от sessions). <code>localStorage</code> появился в Firefox 3.5.</p> + +<div class="note"><strong>Примечание:</strong> Когда браузер переходит в режим приватного просмотра, создается новое временное хранилище. Изначально оно пустое. После выхода из режима приватного просмотра временное хранилище очищается.</div> + +<pre class="brush:js" style="font-size: 14px;">// Сохраняет данные в текущий local store +localStorage.setItem("username", "John"); + +// Извлекает ранее сохраненные данные +alert( "username = " + localStorage.getItem("username"));</pre> + +<p class="note"><code>localStorage</code>'s позволяет постоянно хранить некоторую полезную информацию, включая счетчики посещения страницы, как показано в примере <a href="http://codepen.io/awesom3/pen/Hlfma">this tutorial on Codepen</a>.</p> + +<h4 id="Совместимость" style="line-height: 18px; font-size: 1.28571428571429rem;">Совместимость</h4> + +<p><code>Storage</code> objects недавно добавлен в стандарт. Он может отсутствовать в некоторых браузерах. Вы можете работать с этой технологией добавив в страницу один из двух скриптов, которые представлены ниже. <code>localStorage</code> object реализуется програмно, если нет встроенной реализации.</p> + +<p>Этот алгоритм является точной имитацией <code>localStorage</code> object, но для хранения использует cookies.</p> + +<pre class="brush:js" style="font-size: 14px;">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 + }); + Object.defineProperty(oStorage, "clear", { + value: function () { + if(!aKeys.length) { return; } + for (var sKey in aKeys) { + 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>Примечание:</strong> Максимальныйe размер данных, которые могут быть сохранены, ограничен возможностями cookies. Используйте functions <code>localStorage.setItem()</code> и <code>localStorage.removeItem()</code> для добавления, изменения, или удаления ключа. Использование прямого присвоения <code>localStorage.yourKey = yourValue;</code> и <code>delete localStorage.yourKey;</code> для установки и удаления ключа <strong>не безопасно с этим кодом</strong>. Вы также можете изменить это имя (вместо window.localStorage прописать другое имя) и использовать объект для управления document's cookies, не обращая внимания на localStorage object.</div> + +<div class="note"><strong>Примечание:</strong> Если изменить строку <code style="background: rgb(204, 204, 204);">"; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/"</code> на: <code style="background: rgb(204, 204, 204);">"; path=/"</code> (и изменить имя объекта), он превратится в <code>sessionStorage</code> polyfill больше, чем в <code>localStorage</code> polyfill. Однако эта реализация будет хранить общие значения для всех вкладок и окон браузера (and will only be cleared when all browser windows have been closed), в то время как полностью совместимая <span style="font-family: 'Courier New','Andale Mono',monospace; line-height: normal;">sessionStorage</span><span style="line-height: 1.5em;"> реализация хранит значения</span><span style="line-height: 1.5em;"> 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" style="font-size: 14px;">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: rgb(204, 204, 204);">"; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/"</code> to: <code style="background: rgb(204, 204, 204);">"; 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" style="line-height: 18px; font-size: 1.28571428571429rem;">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> + +<h4 id="Storage_format">Storage format</h4> + +<p><code>Storage</code> keys and values are both stored in the UTF-16 <a href="/en-US/docs/Web/API/DOMString">DOMString</a> format, which uses 2 bytes per character.</p> + +<p> </p> diff --git a/files/ru/web/api/storage/removeitem/index.html b/files/ru/web/api/storage/removeitem/index.html new file mode 100644 index 0000000000..d5b1a628e4 --- /dev/null +++ b/files/ru/web/api/storage/removeitem/index.html @@ -0,0 +1,70 @@ +--- +title: Storage.removeItem() +slug: Web/API/Storage/removeItem +tags: + - API + - Storage + - Справка +translation_of: Web/API/Storage/removeItem +--- +<p>{{APIRef("Web Storage API")}}</p> + +<p>Если методу <code>removeItem()</code> интерфейса {{domxref("Storage")}} передать ключ, то из хранилища будет удален элемент с указанным ключем. </p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate"><em>storage</em>.removeItem(<em>keyName</em>);</pre> + +<h3 id="Параметры">Параметры</h3> + +<dl> + <dt><em><u>названиеКлюча</u></em></dt> + <dd>{{domxref("DOMString")}} содержит в себе название ключа.</dd> +</dl> + +<h3 id="Возвращает">Возвращает</h3> + +<p><em>Метод не возвращает значений.</em></p> + +<h2 id="Пример">Пример</h2> + +<p>Следующая функция создает три элемента внутри локального хранилища и потом удаляет элемент с ключом <em>image</em>.</p> + +<pre class="brush: js notranslate">function populateStorage() { + localStorage.setItem('bgcolor', 'red'); + localStorage.setItem('font', 'Helvetica'); + localStorage.setItem('image', 'myCat.png'); + + localStorage.removeItem('image'); +}</pre> + +<div class="note"> +<p><strong>Примечание: </strong> чтобы увидеть использование этой функции на реальном примере, загляните в <a href="https://mdn.github.io/dom-examples/web-storage/">Web Storage Demo</a>.</p> +</div> + +<h2 id="Стандарты">Стандарты</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Стандарт</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + <tr> + <td>{{SpecName('Web Storage', '#dom-storage-removeitem', 'removeItem()')}}</td> + <td>{{Spec2('Web Storage')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> + + + +<p>{{Compat("api.Storage.removeItem")}}</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<p><a href="/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Using the Web Storage API</a></p> diff --git a/files/ru/web/api/storage/setitem/index.html b/files/ru/web/api/storage/setitem/index.html new file mode 100644 index 0000000000..981eedf10f --- /dev/null +++ b/files/ru/web/api/storage/setitem/index.html @@ -0,0 +1,130 @@ +--- +title: Storage.setItem() +slug: Web/API/Storage/setItem +tags: + - API + - Storage + - Web Storage + - localStorage + - Справка +translation_of: Web/API/Storage/setItem +--- +<p>{{APIRef("Web Storage API")}}</p> + +<p>Если методу <span style="font-family: consolas,monaco,andale mono,monospace;">setItem()</span> интерфейса {{domxref("Storage")}} передать ключ и значение, то в хранилище будет добавлено соответствующее ключу значение, либо, если запись уже есть в хранилище, то значение по ключу будет обновлено.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><em>storage</em>.setItem(<em>названиеКлюча</em>, <em>значениеКлюча</em>);</pre> + +<h3 id="Параметры">Параметры</h3> + +<dl> + <dt><em>названиеКлюча</em></dt> + <dd>Является строкой {{domxref("DOMString")}} содержащей название ключа, значение которого будет добавлено/обновлено.</dd> + <dt><em>значениеКлюча</em></dt> + <dd>Является строкой {{domxref("DOMString")}} содержащей значение ключа, которое будет добавлено/обновлено.</dd> +</dl> + +<h3 id="Возвращаемые_значения">Возвращаемые значения</h3> + +<p><em>Метод не возвращает значений.</em></p> + +<h2 id="Пример">Пример</h2> + +<p>Следующая функция создает три элемента с данными в хранилище.</p> + +<pre class="brush: js">function populateStorage() { + localStorage.setItem('bgcolor', 'red'); + localStorage.setItem('font', 'Helvetica'); + localStorage.setItem('image', 'myCat.png'); +}</pre> + +<div class="note"> +<p><strong>Примечание</strong>: Чтобы вживую посмотреть на работу функции, посетите страницу демонстрации <a href="https://github.com/mdn/web-storage-demo">Web Storage</a>.</p> +</div> + +<h2 id="Характеристики">Характеристики</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Характеристика</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + <tr> + <td>{{SpecName('Web Storage', '#dom-storage-setitem', 'setItem()')}}</td> + <td>{{Spec2('Web Storage')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<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> + </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>Все браузеры имеют различный уровень объема для localStorage и sessionStorage. Здесь <a class="external" href="http://dev-test.nemikor.com/web-storage/support-test/" title="http://dev-test.nemikor.com/web-storage/support-test/">подробное описание объема хранилищ для разных браузеров</a>.</p> + +<div class="note"> +<p><strong>Примечание: </strong>начиная с версии iOS 5.1, Safari Mobile хранит данные localStorage в папке с кэшем, которая может быть очищена случайно по требованию OS, обычно это происходит, когда мало доступного места.</p> +</div> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<p><a href="/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Использование Web Storage API</a></p> |