Skip to content

Commit f7bac1b

Browse files
committed
Правки2
1 parent 36fcc9f commit f7bac1b

File tree

1 file changed

+14
-14
lines changed

1 file changed

+14
-14
lines changed

6-data-storage/02-localstorage/article.md

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -7,19 +7,19 @@
77
Но ведь у нас уже есть куки. Зачем тогда эти объекты?
88

99
- В отличие от кук, объекты веб-хранилища не отправляются на сервер при каждом запросе. Поэтому мы можем хранить гораздо больше данных. Большинство браузеров могут сохранить как минимум 2 мегабайта данных (или больше), и этот размер можно поменять в настройках.
10-
- Ещё одно отличие от куки - сервер не может манипулировать объектами хранилища через HTTP-заголовки. Все делается при помощи JavaScript.
10+
- Ещё одно отличие от куки - сервер не может манипулировать объектами хранилища через HTTP-заголовки. Всё делается при помощи JavaScript.
1111
- Хранилище привязано к источнику (домен/протокол/порт). Это значит, что разные протоколы или поддомены определяют разные объекты хранилища, и они не могут получить доступ к данным друг друга.
1212

1313
Объекты хранилища `localStorage` и `sessionStorage` предоставляют одинаковые методы и свойства:
1414

15-
- `setItem(key, value)` -- сохранить пару ключ/значение (key/value).
15+
- `setItem(key, value)` -- сохранить пару ключ/значение.
1616
- `getItem(key)` -- получить данные по ключу `key`.
1717
- `removeItem(key)` -- удалить данные с ключом `key`.
1818
- `clear()` -- удалить всё.
19-
- `key(index)` -- получить ключ на заданной позиции (index).
20-
- `length` -- количество хранимых пар key/value.
19+
- `key(index)` -- получить ключ на заданной позиции.
20+
- `length` -- количество элементов в хранилище.
2121

22-
Как видим, интерфейс похож на `Map` (`setItem/getItem/removeItem`), но также запоминается и порядок элементов, можно получить n-й ключ при помощи `.key(n)`.
22+
Как вы видите, интерфейс похож на `Map` (`setItem/getItem/removeItem`), но также запоминается порядок элементов, и можно получить доступ к элементу по индексу `key(index)`.
2323

2424
Давайте посмотрим, как это работает.
2525

@@ -44,7 +44,7 @@ alert( localStorage.getItem('test') ); // 1
4444

4545
Нам достаточно находиться на том же источнике (домен/протокол/порт), при этом URL-путь может быть разным.
4646

47-
Объект `localStorage` разделяется, поэтому, если мы устанавливаем данные в одном окне, изменения становятся видимыми в другом.
47+
Объект `localStorage` доступен всем окнам из одного источника, поэтому, если мы устанавливаем данные в одном окне, изменения становятся видимыми в другом.
4848

4949

5050
## Доступ как к обычному объекту
@@ -55,10 +55,10 @@ alert( localStorage.getItem('test') ); // 1
5555
// установить значение для ключа
5656
localStorage.test = 2;
5757

58-
// получить значение для ключа
58+
// получить значение по ключу
5959
alert( localStorage.test ); // 2
6060

61-
// удалить ключ и его значение
61+
// удалить ключ
6262
delete localStorage.test;
6363
```
6464

@@ -78,7 +78,7 @@ delete localStorage.test;
7878

7979
К сожалению, объекты веб-хранилища нельзя перебрать в цикле, они не итерируемы.
8080

81-
Но можно пройти по ним как по обычным массивам:
81+
Но можно пройти по ним, как по обычным массивам:
8282

8383
```js run
8484
for(let i=0; i<localStorage.length; i++) {
@@ -87,7 +87,7 @@ for(let i=0; i<localStorage.length; i++) {
8787
}
8888
```
8989

90-
Другой способ - использовать цикл как по обычному объекту `for key in localStorage`.
90+
Другой способ - использовать цикл, как по обычному объекту `for key in localStorage`.
9191

9292
Здесь перебираются ключи, но вместе с этим выводится несколько встроенных полей, которые нам не нужны:
9393

@@ -177,15 +177,15 @@ alert( sessionStorage.getItem('test') ); // после обновления: 1
177177

178178
...Но если вы откроете ту же страницу в другой вкладке и повторите получить данные снова, то код выше вернет `null`, что значит "ничего не найдено".
179179

180-
Именно из-за того, что `sessionStorage` привязан не только к источнику, а к вкладке браузера. Поэтому `sessionStorage` используется нечасто.
180+
Так получилось, потому что `sessionStorage` привязан не только к источнику, а к вкладке браузера. Поэтому `sessionStorage` используется нечасто.
181181

182182
## Событие `storage`
183183

184184
Когда обновляются данные в `localStorage` или `sessionStorage`, генерируется событие [storage](https://www.w3.org/TR/webstorage/#the-storage-event) со следующими свойствами:
185185

186186
- `key` – ключ, который обновился (`null`, если вызван `.clear()`).
187187
- `oldValue` – старое значение (`null`, если ключ добавлен впервые).
188-
- `newValue` – новое значение (`null`, если ключ был удален).
188+
- `newValue` – новое значение (`null`, если ключ был удалён).
189189
- `url` – url документа, где произошло обновление.
190190
- `storageArea` – объект `localStorage` или `sessionStorage`, где произошло обновление.
191191

@@ -196,7 +196,7 @@ alert( sessionStorage.getItem('test') ); // после обновления: 1
196196
Представьте, что у вас есть два окна с одним и тем же сайтом. Хранилище `localStorage` разделяется между ними.
197197

198198
```online
199-
Вы можете открыть эту страницу в двух окнах браузера, чтобы проверить приведенный ниже код.
199+
Вы можете открыть эту страницу в двух окнах браузера, чтобы проверить приведённый ниже код.
200200
```
201201

202202
Теперь, если оба окна слушают `window.onstorage`, то каждое из них будет реагировать на обновления, произошедшие в другом окне.
@@ -217,7 +217,7 @@ localStorage.setItem('now', Date.now());
217217

218218
**Это позволяет разным окнам одного источника обмениваться сообщениями.**
219219

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` и делают его доступным везде.
221221

222222
## Итого
223223

0 commit comments

Comments
 (0)