You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: 6-data-storage/02-localstorage/article.md
+14-14Lines changed: 14 additions & 14 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -7,19 +7,19 @@
7
7
Но ведь у нас уже есть куки. Зачем тогда эти объекты?
8
8
9
9
- В отличие от кук, объекты веб-хранилища не отправляются на сервер при каждом запросе. Поэтому мы можем хранить гораздо больше данных. Большинство браузеров могут сохранить как минимум 2 мегабайта данных (или больше), и этот размер можно поменять в настройках.
10
-
- Ещё одно отличие от куки - сервер не может манипулировать объектами хранилища через HTTP-заголовки. Все делается при помощи JavaScript.
10
+
- Ещё одно отличие от куки - сервер не может манипулировать объектами хранилища через HTTP-заголовки. Всё делается при помощи JavaScript.
11
11
- Хранилище привязано к источнику (домен/протокол/порт). Это значит, что разные протоколы или поддомены определяют разные объекты хранилища, и они не могут получить доступ к данным друг друга.
12
12
13
13
Объекты хранилища `localStorage` и `sessionStorage` предоставляют одинаковые методы и свойства:
14
14
15
-
-`setItem(key, value)` -- сохранить пару ключ/значение (key/value).
15
+
-`setItem(key, value)` -- сохранить пару ключ/значение.
16
16
-`getItem(key)` -- получить данные по ключу `key`.
17
17
-`removeItem(key)` -- удалить данные с ключом `key`.
18
18
-`clear()` -- удалить всё.
19
-
-`key(index)` -- получить ключ на заданной позиции (index).
20
-
-`length` -- количество хранимых пар key/value.
19
+
-`key(index)` -- получить ключ на заданной позиции.
20
+
-`length` -- количество элементов в хранилище.
21
21
22
-
Как видим, интерфейс похож на `Map` (`setItem/getItem/removeItem`), но также запоминается и порядок элементов, можно получить n-й ключ при помощи `.key(n)`.
22
+
Как вы видите, интерфейс похож на `Map` (`setItem/getItem/removeItem`), но также запоминается порядок элементов, и можно получить доступ к элементу по индексу `key(index)`.
Нам достаточно находиться на том же источнике (домен/протокол/порт), при этом URL-путь может быть разным.
46
46
47
-
Объект `localStorage`разделяется, поэтому, если мы устанавливаем данные в одном окне, изменения становятся видимыми в другом.
47
+
Объект `localStorage`доступен всем окнам из одного источника, поэтому, если мы устанавливаем данные в одном окне, изменения становятся видимыми в другом.
...Но если вы откроете ту же страницу в другой вкладке и повторите получить данные снова, то код выше вернет `null`, что значит "ничего не найдено".
179
179
180
-
Именно из-за того, что `sessionStorage` привязан не только к источнику, а к вкладке браузера. Поэтому `sessionStorage` используется нечасто.
180
+
Так получилось, потому что `sessionStorage` привязан не только к источнику, а к вкладке браузера. Поэтому `sessionStorage` используется нечасто.
181
181
182
182
## Событие `storage`
183
183
184
184
Когда обновляются данные в `localStorage` или `sessionStorage`, генерируется событие [storage](https://www.w3.org/TR/webstorage/#the-storage-event) со следующими свойствами:
185
185
186
186
-`key` – ключ, который обновился (`null`, если вызван `.clear()`).
187
187
-`oldValue` – старое значение (`null`, если ключ добавлен впервые).
188
-
-`newValue` – новое значение (`null`, если ключ был удален).
188
+
-`newValue` – новое значение (`null`, если ключ был удалён).
189
189
-`url` – url документа, где произошло обновление.
190
190
-`storageArea` – объект `localStorage` или `sessionStorage`, где произошло обновление.
**Это позволяет разным окнам одного источника обмениваться сообщениями.**
219
219
220
-
Современные браузеры также поддерживают [Broadcast channel API](https://developer.mozilla.org/en-US/docs/Web/API/Broadcast_Channel_API) специальный API для связи между окнами одного источника, он более полнофункциональный, но менее поддерживаемый. Существуют библиотеки (полифилы), которые эмулируют это API на основе `localStorage` и делают его доступным везде.
220
+
Современные браузеры также поддерживают [Broadcast channel API](https://developer.mozilla.org/ru/docs/Web/API/Broadcast_Channel_API) специальный API для связи между окнами одного источника, он более полнофункциональный, но менее поддерживаемый. Существуют библиотеки (полифилы), которые эмулируют это API на основе `localStorage` и делают его доступным везде.
0 commit comments