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

Урок, в котором рассматриваются объекты API HTML5 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 не поддерживаются }

Проверить, поддерживает ли браузер эти 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 рассмотрим на следующих примерах:

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 составляет 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