Как использовать локальное хранилище данных в JavaScript. Локальное хранилище Безопасность данных localStorage и sessionStorage
The Web Storage API provides mechanisms by which browsers can store key/value pairs, in a much more intuitive fashion than using cookies .
Web Storage concepts and usageThe two mechanisms within Web Storage are as follows:
- sessionStorage maintains a separate storage area for each given origin that"s available for the duration of the page session (as long as the browser is open, including page reloads and restores)
- Stores data only for a session, meaning that the data is stored until the browser (or tab) is closed.
- Data is never transferred to the server.
- Storage limit is larger than a cookie (at most 5MB).
- localStorage does the same thing, but persists even when the browser is closed and reopened.
- Stores data with no expiration date, and gets cleared only through JavaScript, or clearing the Browser cache / Locally Stored Data.
- Storage limit is the maximum amongst the three.
| HTML Living Standard | Living Standard |
https://github.com/mdn/browser-compat-data and send us a pull request.
| Desktop Mobile | |||||||||||
| Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet | |||||||||||
| Chrome Full support 4 | Edge Full support 12 | Firefox Full support 3.5 | IE Full support 8 | Opera Full support 10.5 | Safari Full support 4 |
The compatibility table on this page is generated from structured data. If you"d like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
| Desktop Mobile | |||||||||||
| Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet | |||||||||||
| Chrome Full support 5 | Edge Full support 12 | Firefox Full support 2 | IE Full support 8 | Opera Full support 10.5 | Safari Full support 4 | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support Yes | Opera Android Full support 11 | Safari iOS Full support 3.2 | Samsung Internet Android Full support Yes |
Most modern browsers support a privacy option called "Incognito", "Private Browsing" or something similar that doesn"t store data like history and cookies. This is fundamentally incompatible with Web Storage for obvious reasons. As such, browser vendors are experimenting with different scenarios for how to deal with this incompatibility.
Most browsers have opted for a strategy where storage APIs are still available and seemingly fully functional, with the one big difference that all stored data is wiped after the browser is closed. For these browsers there are still different interpretations of what should be done with existing stored data (from a regular browsing session). Should it be available to read when in Private mode? Then there are some browsers, most notably Safari, that have opted for a solution where storage is available, but is empty and has a quota of 0 bytes assigned, effectively making it impossible to write data to it.
Developers should be aware of these different implementations and take them into account when developing websites depending on Web Storage APIs. For more information please have a look at this WHATWG blog post that specifically deals with this topic.
Урок, в котором рассматриваются объекты API HTML5 sessionStorage и localStorage , предназначенные для сохранения данных и управления ими на устройствах пользователей.
Общие сведения об sessionStorage и localStorageАвторам при реализации некоторого функционала на веб-сайте иногда приходится сохранять данные на устройстве пользователя для того, чтобы потом к ним можно было обратиться. Реализовать эту возможность позволяют объекты API HTML5 sessionStorage и localStorage .
Отличаются эти объекты друг от друга только тем, что имеют различный период времени хранения данных, помещённых в них. Объект sessionStorage хранит данные ограниченное время, они удаляются сразу после того как пользователь завершает свой сеанс или закрывает браузер. Объект localStorage в отличие от объекта sessionStorage хранит данные неограниченное время.
Контейнеры localStorage и sessionStorage хранят данные с помощью элементов (пар "ключ-значение"). Ключ представляет собой некоторый идентификатор, который связан со значением. Т.е. для того чтобы записать или получить некоторое значение необходимо знать его ключ. Значение представляет собой строку, это необходимо учитывать при работе с ним в коде JavaScript. Если Вам необходимо вместо строки записать в хранилище сложный объект, то одним из вариантов решения этой задачи может стать его сериализация в JSON с помощью функции JSON.stringify() .
If (window.sessionStorage && window.localStorage) { //объекты sessionStorage и localtorage поддерживаются } else { //объекты sessionStorage и localtorage не поддерживаются }
Методы и свойство length объектов sessionStorage и localStorageПроверить, поддерживает ли браузер эти API можно с помощью следующей строки:
GetItem(key) Метод getItem(key) используется для получения значения элемента хранилища по его ключу (key). .setItem(key,value) Метод setItem(key,value) предназначен для добавления в хранилище элемента с указанным ключом (key) и значением (value). Если в хранилище уже есть элемент с указанным ключом (key), то в этом случае произойдет изменения его значения (value). .key(индекс) Метод key(индекс) возвращает ключ элемента по его порядковому номеру (индексу), который находится в данном хранилище. .removeItem(key) Метод removeItem(key) удаляет из контейнера sessionStorage или localStorage элемент, имеющий указанный ключ. .clear() Метод clear() удаляет все элементы из контейнера. .length Свойство length возвращает количество элементов, находящихся в контейнере.
Работа с хранилищем localStorageРаботу с хранилищем localStorage рассмотрим на следующих примерах:
1. Добавить значение, содержащее цвет фона в хранилище. Доступ к данному значению будем осуществлять по ключу bgcolor .
LocalStorage.setItem("bgColor","green");
2. Получить цвет фона из хранилища по ключу bgColor . Установить этот цвет фона странице.
Var bgColor = localStorage.getItem("bgColor"); $("body").css("background-color",bgColor);
3. Узнать какое имя имеет ключ, который хранится в 1 элементе массива localStorage:
4. Удалить из контейнера localStorage элемент, имеющий ключ bgcolor:
LocalStorage.removeItem("bgColor");
5. Удалить из контейнера localStorage все элементы:
LocalStorage.clear();
6. Перебрать все элементы, находящиеся в контейнере localStorage .
var str="";
for (var i=0; i < localStorage.length; i++) {
str += "Ключ: " + localStorage.key(i) + "; Значение: " + localStorage.getItem(localStorage.key(i)) + ".
";
}
document.getElementById("elements").innerHTML = str;
Var data = { data1: "Значение", data2: "Значение", data3: "Значение" //... } localStorage.setItem("Ключ", JSON.stringify(data));
8. Получить значение сложного объекта из элемента контейнера localStorage .
Var data = {}; if (localStorage.getItem("Ключ")) { data = JSON.parse(localStorage.getItem("Ключ")); }
Работа с хранилищем sessionStorage осуществляется аналогичным способом.
Размер хранилища localStorageВ большинстве браузерах размер контейнера localStorage составляет 5 Мбайт. Эта цифра является большой и достаточной для того, чтобы туда сохранить данные необходимые для работы сайта.
Однако бывают такие ситуации, когда авторы веб-сайтов могут заполнить и этот объем. Прежде всего, это касается таких случаев, когда разработчики забывают о старых данных и добавляют в хранилище localStorage всё новые и новые порции данных. Вследствие чего через некоторое время объём этих данных может достигнуть лимита хранилища localStorage и новые порции данных уже поступать не будут.
Чтобы этого не произошло при сохранении данных можно указывать дату (штамп времени). А потом, например, при загрузке страницы проверять устарели эти данные или нет. Данные, которые уже устарели удалять. Таким образом, можно поддерживать порядок Ваших записей в localStorage .
Рассмотрим эту ситуацию на примере интернет-магазина в котором описанный выше механизм будет использоваться для сохранения информации о просмотренных пользователем товарах.
// товар, который просматривает пользователь в магазине
var viewItem = {
id: "5456098",
name: "Смартфон LG G4",
dateView: new Date() // дата просмотра товара в интернет-магазине
};
// сохраняем, просматриваемый в данный момент пользователем товар в хранилище
localStorage.setItem (viewItem.id, JSON.stringify(viewItem));
// удаляем старые записи
var key, value;
// перебираем все данные в хранилище
for (var i=0; i
Статьи по теме
