54 lines
2.3 KiB
Markdown
54 lines
2.3 KiB
Markdown
---
|
||
title: HTML5 Web Storage
|
||
localeTitle: Веб-хранилище HTML5
|
||
---
|
||
## Веб-хранилище HTML5
|
||
|
||
Хранилище веб-сайтов позволяет веб-приложениям хранить до 5 МБ информации в хранилищах браузеров на каждый источник (на домен и протокол).
|
||
|
||
### Типы веб-хранилища
|
||
|
||
Для хранения данных на клиенте есть два объекта:
|
||
|
||
`window.localStorage` : хранит данные без даты истечения срока действия и до тех пор, пока не будет удален.
|
||
|
||
```javascript
|
||
// Store Item
|
||
localStorage.setItem("foo", "bar");
|
||
|
||
// Get Item
|
||
localStorage.getItem("foo"); //returns "bar"
|
||
```
|
||
|
||
`window.sessionStorage` : сохраняет данные за один сеанс, где данные теряются, когда вкладка браузера / браузера закрыта.
|
||
|
||
```javascript
|
||
// Store Item
|
||
sessionStorage.setItem("foo", "bar");
|
||
|
||
// Get Item
|
||
sessionStorage.getItem("foo"); //returns "bar"
|
||
```
|
||
|
||
Поскольку текущая реализация поддерживает только привязки строк к строкам, вам необходимо сериализовать и де-сериализовать другие структуры данных.
|
||
|
||
Вы можете сделать это с помощью JSON.stringify () и JSON.parse ().
|
||
|
||
Например, для данного JSON
|
||
```
|
||
var jsonObject = { 'one': 1, 'two': 2, 'three': 3 };
|
||
```
|
||
|
||
Сначала мы конвертируем объект JSON в строку и сохраняем в локальном хранилище:
|
||
```
|
||
localStorage.setItem('jsonObjectString', JSON.stringify(jsonObject));
|
||
```
|
||
|
||
Чтобы получить объект JSON из строки, хранящейся в локальном хранилище:
|
||
```
|
||
var jsonObject = JSON.parse(localStorage.getItem('jsonObjectString'));
|
||
```
|
||
|
||
#### Дополнительная информация:
|
||
|
||
[MDN](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) [Скалы HTML5](https://www.html5rocks.com/en/features/storage) [W3 Школы](https://www.w3schools.com/html/html5_webstorage.asp) |