1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
|
---
title: Window.localStorage
slug: Web/API/Window/localStorage
tags:
- API
- Property
- Web Storage
- Window
- Довідка
translation_of: Web/API/Window/localStorage
---
<p>{{APIRef()}}</p>
<p>Властивість <code>localStorage</code> надає доступ до об’єкта {{domxref("Storage")}}, пов'язаного з джерелом поточного {{domxref("Document", "документа")}}. Сховище <code>localStorage</code> є схожим на <code><a href="/uk/docs/Web/API/Window.sessionStorage">sessionStorage</a></code>, але не має обмежень тривалості зберігання даних, тоді як дані <code>sessionStorage</code> видаляються по закритті сторінки (насправді, лише після закриття всіх сторінок з цього джерела, якщо їх кілька відкрито в переглядачі).</p>
<p>Варто також зазначити, що сторінки, завантажені з різних джерел (важить все: <strong>ім'я хоста, порт, та навіть протокол — http/https</strong>), з міркувань безпеки мають незалежні окремі сховища, тож до даних одне одного доступу не мають.</p>
<h2 id="Синтакс">Синтакс</h2>
<pre><em>myStorage</em> = window.localStorage;</pre>
<h3 id="Значення">Значення</h3>
<p>Об’єкт типу {{domxref("Storage")}}, який можна використовувати для доступу до чинного для поточної сторінки сховища.</p>
<h3 id="Винятки">Винятки</h3>
<dl>
<dt><code><strong>SecurityError</strong></code></dt>
<dd>Виникає в разі порушення встановлених правил або коли джерелом сторінки є неприйнятний протокол/хост/порт (наприклад, коли протоколом джерела є <code>file:</code> чи <code>data:</code>). Зокрема, користувач може заборонити збереження даних з окремих джерел в налаштуваннях переглядача.</dd>
</dl>
<h2 id="Приклад">Приклад</h2>
<p>Розгляньмо основні дії зі сховищем: запис, читання, видалення окремого ключа та повне очищення всього сховища.</p>
<p>Цей приклад створює (чи змінює, якщо такий ключ вже існує) запис в чинному для поточної сторінки сховищі (через об'єкт типу {{domxref("Storage")}}) за допомогою метода {{domxref("Storage.setItem()", "setItem()")}}:</p>
<pre class="brush: js">localStorage.setItem('Кіт', 'Барсик');</pre>
<p>Дістати значення за ключем дозволяє метод {{domxref("Storage.getItem()", "getItem()")}}:</p>
<pre class="brush: js">var cat = localStorage.getItem('Кіт');</pre>
<p>Для видалення раніше створеного запису за його ключем існує метод {{domxref("Storage.removeItem()", "removeItem()")}}:</p>
<pre class="brush: js">localStorage.removeItem('Кіт');</pre>
<p>А для очищення сховища (видалення всіх створених записів) призначено метод {{domxref("Storage.clear()", "clear()")}}:</p>
<pre class="brush: js">localStorage.clear();</pre>
<div class="note">
<p><strong>Заувага</strong>: повний приклад див. у статті <a href="/uk/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Використання Web Storage API</a>.</p>
</div>
<p>А тепер розгляньмо дещо змістовніший приклад:</p>
<pre class="brush: js">function clearCart() {
var count = parseInt(localStorage.getItem('cart-size')) || 0;
for (var i = 1; i <= count; i++) {
localStorage.removeItem('cart-item-' + i)
}
localStorage.removeItem('cart-size');
}
function addCartItem(itemId) {
var count = parseInt(localStorage.getItem('cart-size')) || 0;
localStorage.setItem('cart-item-' + (count + 1), itemId);
localStorage.setItem('cart-size', count + 1);
}
function getCartItems() {
var items = [];
var count = parseInt(localStorage.getItem('cart-size')) || 0;
for (var i = 1; i <= count; i++) {
var itemId = localStorage.getItem('cart-item-' + i);
items.push(parseInt(itemId));
}
return items;
}
addCartItem(111);
addCartItem(222);
console.log(getCartItems()); // виводить [111, 222]
clearCart();
console.log(getCartItems()); // виводить []
</pre>
<p>Варто зауважити, що сховище працює лише з рядками (як ключ, так і значення мусить бути рядком, або його буде перетворено на рядок неявним викликом {{jsxref("Object.prototype.toString()", "toString()")}}). Тому для зберігання структурованих даних доведеться спершу подбати про їх перетворення в текстовий рядок — наприклад, JSON:</p>
<pre class="brush: js">function setLocalStorageObjectItem(key, value) {
if (value === undefined) {
localStorage.removeItem(key);
} else {
localStorage.setItem(key, JSON.stringify(value));
}
}
function getLocalStorageObjectItem(key) {
var json = localStorage.getItem(key);
if (json === undefined) {
return undefined;
}
return JSON.parse(json);
}
setLocalStorageObjectItem('foo', {a: {x: 123}});
console.log(getLocalStorageObjectItem('foo')); // виводить {a: {x: 123}}
</pre>
<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#dom-localstorage', 'localStorage')}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td> </td>
</tr>
</tbody>
</table>
<h2 id="Підтримка_веб-переглядачами">Підтримка веб-переглядачами</h2>
<div class="hidden">Таблиця сумісності на цій сторінці створена зі структурованих даних. Якщо ви хочете долучитися до розробки цих даних, пропонуйте нам свої pull request до репозиторію <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
<p>{{Compat("api.Window.localStorage")}}</p>
<h2 id="Див._також">Див. також</h2>
<ul>
<li><a href="/uk/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Використання Web Storage API</a></li>
<li>{{domxref("LocalStorage")}}</li>
<li>{{domxref("SessionStorage")}}</li>
<li>{{domxref("Window.sessionStorage")}}</li>
</ul>
|
