Как использовать локальное хранилище для JavaScript. Локальное хранилище Браузерное хранилище

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 usage

The 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.

Specifications Specification Status Comment

HTML Living Standard	Living Standard

Browser compatibility Window.localStorage

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 localStorage

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

Legend Full support Full support Window.sessionStorage

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 sessionStorage

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

Legend Full support Full support Private Browsing / Incognito modes

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.

Обзор Web Storage

В интернете информацию можно сохранять в двух местах: на веб-сервере и на веб-клиенте (т.е. компьютере посетителя страницы). Определенные типы данных лучше хранить в одном из этих мест, а другие типы - в другом.

Правильным местом для хранения конфиденциальных и важных данных будет веб-сервер. Например, если вы положите какие-либо товары в свою корзину в онлайновом магазине, данные о вашей потенциальной покупке сохраняются на веб-сервере. На вашем компьютере сохраняется лишь несколько байтов данных для отслеживания, содержащих информацию о вас (или, вернее, о вашем компьютере), чтобы веб-сервер знал, какая из корзин ваша. Даже с новыми возможностями HTML5 изменять эту систему нет надобности - она надежная, безопасная и эффективная.

Но хранение данных на сервере не всегда является лучшим подходом, т.к. иногда легче хранить второстепенную информацию на компьютере пользователя. Например, имеет смысл хранить локально пользовательские настройки (скажем, параметры, которые определяют способ отображения веб-страницы) и состояние приложения (снимок текущего состояния веб-приложения), чтобы посетитель мог продолжить его выполнение с того же самого места позже.

До HTML5 единственным способом локального хранения данных было использование механизма файлов cookies , который первоначально был разработан для обмена небольшими объемами идентифицирующей информации между веб-серверами и браузерами. Файлы cookies подходят идеально для хранения небольших объемов данных, но модель JavaScript для работы с ними несколько неуклюжа. Система файлов cookies также вынуждает разработчика возиться со сроками действия и бесполезно пересылать данные туда и обратно по интернету с каждым запросом страницы.

В HTML5 вводится лучшая альтернатива файлам cookies, которая позволяет легко и просто сохранять информацию на компьютере посетителя. Эта информация может храниться на клиентском компьютере неограниченное время, не отправляется на веб-сервер (если только разработчик не сделает это сам), может быть большого объема и для работы с ней требуется всего лишь пара простых, эффективных объектов JavaScript.

Эта возможность называется веб-хранилищем (Web Storage) и особенно хорошо подходит для применения с автономным режимом работы вебсайтов, т.к. позволяет создавать самодостаточные автономные приложения, которые могут сохранять всю требуемую им информацию даже при отсутствии подключения к интернету.

Функциональность веб-хранилища HTML5 позволяет веб-странице сохранять данные на компьютере посетителя. Эта информация может быть кратковременной, которая удаляется после выключения браузера, или долговременной, которая остается доступной при последующих посещениях веб-страницы.

Сохраняемая в веб-хранилище информация в действительности сохраняется не в интернете, а на компьютере посетителя веб-страницы. Иными, словами, веб-хранилище означает хранение данных не в интернете, а хранение данных из интернета.

Существуют два типа веб-хранилищ, которые так или иначе связаны с двумя объектами:

Локальное хранилище

Использует объект localStorage для хранения данных для всего веб-сайта на постоянной основе. Это означает, что если веб-страница сохранит данные в локальном хранилище, эти данные будут доступны для пользователя, когда он возвратится на эту веб-страницу на следующий день, на следующей неделе или в следующем году.

Конечно же, большинство браузеров также предоставляет пользователю возможность очистить локальное хранилище. В некоторых браузерах она реализована как стратегия "все или ничего", и посредством ее удаляются все локальные данные, во многом подобно тому, как удаляются cookies-файлы. (В действительности, в некоторых браузерах система cookies и локальное хранилище взаимосвязаны, так что единственным способом удалить локальные данные будет удаление cookies.) А другие браузеры могут предоставлять пользователю возможность просмотра данных для каждого отдельного веб-сайта и удалять данные для выбранного сайта или сайтов.

Хранилище данных сеансов

Использует объект sessionStorage для временного хранения данных для одного окна или вкладки браузера. Эти данные доступны лишь до тех пор, пока пользователь не закроет окно или вкладку, после чего сеанс заканчивается и данные удаляются. Но данные сеанса сохраняются, если пользователь переходит на другой веб-сайт, а потом возвращается обратно при условии, что это происходит в том же окне браузера.

С точки зрения кода веб-страницы, как локальное хранилище, так и хранилище данных сеансов работают абсолютно одинаково. Разница состоит лишь в длительности хранения данных.

Использование локального хранилища предоставляет наилучшую возможность для сохранения требуемой информации для последующих посещений вебстраницы пользователем. А хранилище сеансов служит для хранения данных, которые нужно передавать от одной страницы другой. (В хранилище сеансов можно также хранить временные данные, используемые только на одной странице, но для этой цели прекрасно работают обычные переменные JavaScript.)

Как локальное хранилище, так и хранилище сеансов связано с доменом веб-сайта. Таким образом, если сохранить в локальном хранилище данные для страницы www..html, эти данные будут доступны для страницы www..html, т.к. обе эти страницы имеют один и тот же домен. Но эти данные не будут доступны для страниц других доменов.

Кроме этого, т.к. веб-хранилище расположено на компьютере (или мобильном устройстве) данного пользователя, оно связано с этим компьютером, и веб-страница, открытая на данном компьютере и хранящая данные в его локальном хранилище, не имеет доступа к информации, которую она сохранила на другом компьютере. Подобным образом веб-страница создает отдельное локальное хранилище, если вы войдете в систему под другим именем пользователя или запустите другой браузер.

Хотя спецификация HTML5 не устанавливает никаких жестких правил в отношении максимального объема хранилища, большинство браузеров ограничивают его 5 Мбайт. В этот объем можно упаковать много данных, но его будет недостаточно, если вы хотите использовать локальное хранилище для оптимизации производительности и кэшировать в нем изображения или видео большого объема (и, по правде говоря, локальное хранилище не предназначено для таких целей).

Для хранения большого объема данных все еще развивающийся стандарт базы данных IndexedDB допускает локальное хранение намного большего объема - обычно 50 Мбайт для начала и больше, по согласию пользователя.

Сохранение данных

Прежде чем поместить фрагмент информации в локальное хранилище или хранилище сеансов, ему необходимо присвоить описательное имя. Это имя называется ключом (key) и нужно для того, чтобы данные можно было извлечь в будущем.

Синтаксис для сохранения фрагмента данных следующий:

localStorage = data;

// JS localStorage["username"] = "Ivan Petrov";

Конечно же, сохранять фрагмент статического текста не имеет смысла. Как правило нам требуется сохранять какие-либо переменные данные, например текущую дату, результат математического вычисления или текстовые данные, введенные пользователем в поля формы. Далее приведен пример сохранения введенных пользователем текстовых данных:

Веб-хранилище Этот текст сохранится в локальном хранилище:
Этот текст сохранится в хранилище данных сессии: Сохранить Загрузить

Function saveData() { // Получаем значения текстовых полей var localData = document.getElementById("localData").value; var sessionData = document.getElementById("sessionData").value; // Сохраняем текст, введенный в текстовом поле, в локальном хранилище localStorage["localData"] = localData; // Сохраняем текст, введенный в текстовом поле, в хранилище сессий sessionStorage["sessionData"] = sessionData; } function loadData() { // Загружаем сохраненные данные из хранилищ var localData = localStorage["localData"]; var sessionData = sessionStorage["sessionData"]; // Отображаем эти данные в текстовых полях if (localData != null) { document.getElementById("localData").value = localData; } if (sessionData != null) { document.getElementById("sessionData").value = sessionData; } }

Страница содержит два текстовых поля: для локального хранилища (вверху) и для хранилища сеансов (внизу). Нажатие кнопки "Сохранить" сохраняет текст, введенный в текстовые поля, а нажатие кнопки "Загрузить" выводит в полях соответствующие сохраненные данные.

Веб-хранилище также поддерживает менее распространенный синтаксис свойств. Согласно правилам этого синтаксиса, мы обращаемся к ячейке хранения с именем username как localStorage.username, а не localStorage["username"]. Оба типа синтаксиса равнозначны, и использование того или другого является вопросом личного предпочтения.

Веб-хранилище не работает без веб-сервера

В своих исследованиях веб-хранилища вы можете столкнуться с неожиданной проблемой. Во многих браузерах веб-хранилище работает только для страниц, предоставленных веб-сервером. При этом не важно, где расположен сервер, в интернете или на вашем собственном компьютере, самое главное, просто чтобы страницы не запускались с локального жесткого диска (например, двойным щелчком по значку файла страницы).

Эта особенность является побочным эффектом способа, которым браузеры выделяют место в локальное хранилище. Как ранее говорилось, браузеры ограничивают локальное хранилище для каждого веб-сайта 5 Мбайт, для чего им нужно ассоциировать каждую страницу, которая хочет использовать локальное хранилище, с доменом вебсайта.

Что же происходит, если открыть страницу, которая использует веб-хранилище, с локального жесткого диска? Все зависит от браузера. Браузер Internet Explorer, похоже, полностью утрачивает поддержку веб-хранилища. Объекты localStorage и sessionStorage исчезают, и попытка использовать их вызывает ошибку JavaScript.

В браузере Firefox объекты localStorage и sessionStorage остаются на месте и, вроде бы, поддерживаются (даже Modernizr определяет, что поддерживаются), но все, что отправляется на хранение, исчезает неведомо куда. В браузере Chrome опять же что-то другое - большая часть функциональности веб-хранилища работает как следует, но некоторые возможности (например, событие onStorage) не работают.

Подобные проблемы возникают и с использованием интерфейса File API. Поэтому вы избавите себя от многих хлопот, если поместите тестируемую страницу на тестовый сервер, чтобы избежать всех этих неопределенностей.

Поддержка веб-хранилища браузерами

Веб-хранилище является одной из наиболее поддерживаемой возможностью HTML5, с хорошим уровнем поддержки в каждом основном браузере. В таблице ниже приведены минимальные версии основных браузеров, поддерживающих веб-хранилище:

Все эти браузеры предоставляют возможность локального хранилища и хранилища данных сеанса. Но для поддержки события onStorage требуются более поздние версии браузеров, например IE 9, Firefox 4 или Chrome 6.

Самой проблемной является версия IE 7, которая не поддерживает веб-хранилище вообще. В качестве обходного решения можно эмулировать веб-хранилище посредством файлов cookies. Это не совсем идеальное решение, но оно работает. Хотя официального сценария для закрытия этого пробела не существует, несколько хороших отправных точек можно найти на странице HTML5 Cross Browser (в разделе "Web Storage").

Из таких web приложений, как Google Wave, Gmail и т.п. мы видим, что кеширование данных на стороне клиента это хорошая идея для большинства веб-приложений. Подумайте сами, для мобильного интернета очень важен объем . Однотипные запросы в 70% случаях (я не делал никаких расчетов, просто выражать доводы в процентах гораздо солиднее) возвращают одни и те же данные. Кроме того кешировать можно не только данные, но и само приложение.

До сих пор наиболее популярным методом для локального хранения были cookie. Cookie - это пара ключ-значение, которые хранятся локально в текстовом файле (4KB или 20 пар ключ-значение максимум(IE) для одного домена). Кроме того cookie передаются на сервер при любом HTTP запросе на сервер, даже при AJAX. Закономерно, что в стандарте должны были появится средства для более практичного хранения данных в браузере.

Из всей спецификации HTML5 , локальные хранилища данных на стороне клиента, вероятно, одна из самых обсуждаемых тем. Есть как положительные, так и отрицательные мнения. Из минусов, самый весомый это нарушение концепции актуальности данных для всех пользователей, т.е. так, как это работает сейчас: пользователь заходит на сайт и видит последнюю версию веб-приложения, ту которую видят и все остальные пользователи. Однако при верном применении локальных хранилищ и своевременного обновления данных, этих проблем можно избежать.

Итак, хранилище на стороне клиента делится на 3 принципиальных методологии:

Session storage.

Local storage или Global Storage

Давайте подробнее рассмотрим каждую из них:

1. Session Storage - сессионное хранилище

Сессионное хранилище более удобно, чем cookie. С различными реализациями макс. лимит может быть порядка нескольких Мбит. В отличии от cookie сессионные данные не отправляются при каждом запросе.
Преимущества: при запросе полезная нагрузка минимальна.
Приведем пример сессионного хранилища:

SessionStorage.setItem("userName", "taranfx"); // определяем сессионную переменную alert("Вас зовут: " + sessionStorage.getItem("userName"));// проверка доступа alert("Привет " + sessionStorage.userName); // другой метод доступа к сессионной переменной sessionStorage.removeItem("userName"); // в конце удаляем переменную

2. Local Storage - локальное хранилище

LocalStorage JavaScript объект функционально идентичен sessionStorage объекту. Они отличаются только продолжительностью жизни и областью видимости. Область видимости: данные в localStorage доступны через все окна браузера в то время, как sessionStorage данные ограничивается окном в котором были созданы.
Глобальное хранилище памяти задается браузером, веб-сайты могут использовать его для хранения постоянных данных, которые не должны быть отправлены на сервер. Данные доступны по JavaScript и Flash. Это может быть очень удобно для Flash-игр.

GlobalStorage[""].foo = "bar"; // foo будет доступен на любом веб-сайте globalStorage["ru"].foo1 = "bar1"; // foo1 будут доступны на сайтах "..foo2 = "bar2"; // foo2 будет доступен только на сайт

При локальном хранении данных, спецификация была переписана в более безопасную сторону. Т.е. теперь данные автоматически привязываются к домену.
Продолжительность действия: при хранении в Local Storage данные сохраняются даже после закрытия вкладки/окна/браузера.

Вот как это можно сделать:

LocalStorage.setItem("userName", "taranfx"); // определяем переменную в localStorage alert("Вас зовут: " + localStorage.getItem("userName")); // доступ к ней alert("Привет " + localStorage.userName); // доступ к ней по другому localStorage.removeItem("userName"); // в конце удаляем ее

3. Database Storage - хранение в базе данных

До сих пор мы обсуждали хранилища ограниченные парами ключ-значение. Но когда вы имеете дело с большими объемами данных, лучше базы данных еще ничего не придумали. Браузеры использует SQLite базы, которая работает без дополнительных процессов и серверов. Лишь с небольшими ограничениями, к примеру отсутствие внешнего ключа.

Но в награду вы получаете полноценную SQL базу данных. И работа с ней ведется на SQL.

Урок, в котором рассматриваются объекты 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