87 lines
4.7 KiB
Markdown
87 lines
4.7 KiB
Markdown
|
---
|
|||
|
title: Store Data in Web Browsers Storage
|
|||
|
localeTitle: Хранить данные в хранилищах веб-браузеров
|
|||
|
---
|
|||
|
Для управления данными, обрабатываемыми вашим веб-приложением, вам не обязательно нужна база данных. Соответствующие функции браузера поддерживаются Chrome (версия 4 и выше), Mozilla Firefox (версия 3.5 и выше) и Internet Explorer (версия 8 и выше), а также ряд других браузеров, в том числе iOS и Android.
|
|||
|
|
|||
|
Существуют две основные возможности для хранения в браузере:
|
|||
|
|
|||
|
## 1\. localStorage
|
|||
|
|
|||
|
Любой контент / данные, сохраненные в объекте `localStorage` будут доступны после перезапуска браузера (закрыты и снова открыты). Чтобы **_сохранить элемент_** в `localStorage` , вы можете использовать метод `setItem()` . Этот метод должен быть передан ключ и значение.
|
|||
|
```
|
|||
|
Example: localStorage.setItem("mykey","myvalue");
|
|||
|
```
|
|||
|
|
|||
|
Чтобы **_получить элемент из localStorage_** , необходимо использовать метод `getItem` . Метод `getItem` должен быть передан ключ данных, которые вы хотите получить:
|
|||
|
```
|
|||
|
Example: localStorage.getItem("mykey");
|
|||
|
```
|
|||
|
|
|||
|
Вы можете удалить элемент из `localStorage` с помощью `removeItem()` . Этот метод должен быть передан ключ элемента, который нужно удалить:
|
|||
|
```
|
|||
|
Example: localStorage.removeItem("mykey");
|
|||
|
```
|
|||
|
|
|||
|
Чтобы очистить весь `localStorage` , вы должны использовать метод `clear()` для объекта `localStorage` :
|
|||
|
```
|
|||
|
Example: localStorage.clear();
|
|||
|
```
|
|||
|
|
|||
|
## 2\. sessionStorage
|
|||
|
|
|||
|
Элементы, сохраненные в объекте `sessionStorage` , останутся до тех пор, пока пользователь не закроет браузер. Затем хранилище будет очищено.
|
|||
|
|
|||
|
Вы можете сохранить элемент в `sessionStorage` , используйте метод `setItem()` `sessionStorage` объекта `sessionStorage` :
|
|||
|
```
|
|||
|
Example: sessionStorage.setItem("mykey","myvalue");
|
|||
|
```
|
|||
|
|
|||
|
Чтобы **_извлечь элемент из sessionStorage_** , необходимо использовать метод `getItem` . Метод `getItem` должен быть передан ключ данных, которые вы хотите получить:
|
|||
|
```
|
|||
|
Example: sessionStorage.getItem("mykey");
|
|||
|
```
|
|||
|
|
|||
|
Вы можете удалить элемент из `sessionStorage` с помощью `removeItem()` . Этот метод должен быть передан ключ элемента, который нужно удалить:
|
|||
|
```
|
|||
|
Example: sessionStorage.removeItem("mykey");
|
|||
|
```
|
|||
|
|
|||
|
Чтобы очистить весь `sessionStorage` , вы должны использовать метод `clear()` для объекта `sessionStorage` :
|
|||
|
```
|
|||
|
Example: sessionStorage.clear();
|
|||
|
```
|
|||
|
|
|||
|
## Сохранение массивов в localStorage и sessionStorage
|
|||
|
|
|||
|
Вы не можете просто сохранить отдельные значения в `localStorage` и `sessionStorage` , но вы также можете сохранить содержимое массива.
|
|||
|
|
|||
|
В этом примере у нас есть массив с числами:
|
|||
|
```
|
|||
|
var ourArray =[1,2,3,4,5];
|
|||
|
```
|
|||
|
|
|||
|
Теперь мы можем сохранить его в `localStorage` или `sessionStorage` с помощью `setItem()` :
|
|||
|
```
|
|||
|
localStorage.setItem("ourarraykey",JSON.stringify(ourArray));
|
|||
|
```
|
|||
|
|
|||
|
или, для `sessionStorage` :
|
|||
|
```
|
|||
|
sessionStorage.setItem("ourarraykey",JSON.stringify(ourArray));
|
|||
|
```
|
|||
|
|
|||
|
Для сохранения массив сначала должен быть преобразован в строку. В приведенном выше примере мы используем метод `JSON.stringify` для этого.
|
|||
|
|
|||
|
При извлечении наших данных из `localStorage` или `sessionStorage` преобразуйте его обратно в массив:
|
|||
|
```
|
|||
|
var storedArray = localStorage.getItem("ourarraykey");
|
|||
|
ourArray = JSON.parse(storedArray);
|
|||
|
```
|
|||
|
|
|||
|
или, для `sessionStorage` :
|
|||
|
```
|
|||
|
var storedArray = sessionStorage.getItem("ourarraykey");
|
|||
|
ourArray = JSON.parse(storedArray);
|
|||
|
|
|||
|
```
|