Последнее обновление: 1.11.2015

Хотя куки позволяют сохранять информацию, они имеют ряд ограничений. Например, браузер имеет ограничения на размер куков - каждая кука не может превышать 4 кб. Куки имеют срок действия, после которого удаляются. Куки являются неотъемлемой чертой протокола HTTP и при каждом запросе к серверу передаются вместе с запросом на сервер. Однако для работы с куками на стороне клиента в коде javascript не имеет значения передача куков на сервер. Кроме того, для извлечения сохраненных куков надо написать некоторую порцию кода.

Поэтому в HTML5 была внедрена новая концепция для хранения данных - web storage . Web storage состоит из двух компонентов: session storage и local storage .

Session storage представляет временное хранилище информации, которая удаляется после закрытия браузера.

Local storage представляет хранилище для данных на постоянной основе. Данные из local storage автоматически не удаляются и не имеют срока действия. Эти данные не передаются на сервер в запросе HTTP. Кроме того, объем local storage составляет в Chrome и Firefox 5 Mб для домена, а в IE - 10 Mб.

Все данные в web storage представляют набор пар ключ-значение. То есть каждый объект имеет уникальное имя-ключ и определенное значение.

Для работы с local storage в javascript используется объект localStorage , а для работы с session storage - объект sessionStorage .

Для сохранения данных надо передать в метод setItem() объекта localStorage:

LocalStorage.setItem("login", "[email protected]");

В этот метод передаются два значения: ключ и значение сохраняемого объекта.

Если в localStorage уже есть объект с ключом "login", то его значение заменяется новым.

Для получения сохраненных данных надо вызвать метод getItem() :

Var login = localStorage.getItem("login"); //[email protected]

В этот метод передается ключ объекта.

Чтобы удалить объект, применяется метод removeItem() , который принимает ключ удаляемого объекта:

LocalStorage.removeItem("login");

И для полного удаления всех объектов из localStorage можно использовать метод clear() :

LocalStorage.clear();

С сохранением простых объектов все просто, однако при этом надо учитывать, что данные в localStorage сохраняются в виде строки:

LocalStorage.setItem("age", 23); var age = localStorage.getItem("age"); age=parseInt(age)+10; document.write(age); //33

Если в данном случае не преобразовать значение к числу с помощью parseInt() , то age будет действовать как строка.

Трудности могут возникнуть с сохранением сложных объектов:

Var user ={ name: "Tom", age: 23, married: false }; localStorage.setItem("user", user); var savedUser = localStorage.getItem("user"); document.write(savedUser); // document.write(savedUser.name); // undefined - savedUser - строка, а не объект

В этом случае нам надо использовать сериализацию в формат JSON:

Var user ={ name: "Tom", age: 23, married: false }; localStorage.setItem("user", JSON.stringify(user)); var savedUser = JSON.parse(localStorage.getItem("user")); document.write(savedUser.name + " " + savedUser.age +" " + savedUser.married); // Tom 23 false

Из таких 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.

Куки, которые мы разбирали в предыдущем уроке, очень ограничены: в одной куке может быть всего 4096 символов, а количество кук на один домен может быть примерно 30-50 в зависимости от браузера. Поэтому, увы, но много информации там хранить не получится. Так уж сложилось исторически.

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

Работа с локальным хранилищем

Для работы с локальным хранилищем предназначен встроенный в браузер объект localStorage. У него есть 4 простых для понимания методов. Вот они:

//Сохранение значения: localStorage.setItem("Ключ", "Значение"); //Получение значения: var value = localStorage.getItem("Ключ"); //Удаление значения: localStorage.removeItem("Ключ"); //Очистка всего хранилища: localStorage.clear();

С localStorage можно также работать как с обычным массивом:

//Сохранение значения: localStorage["Ключ"] = "Значение"; //Получение значения: var value = localStorage["Ключ"]; //Удаление значения: delete localStorage["Ключ"];

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

Примеры

В следующем примере мы запишем имя пользователя в локальное хранилище:

LocalStorage.setItem("name", "Иван");

Через некоторое время получим это имя обратно:

Alert(localStorage.getItem("name"));

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

Сохранение объектов

Локальное хранилище не способно хранить объекты и массивы JavaScript, хотя это зачастую бывает удобно. Но способ есть - нужно сериализовать эти данные в формат JSON - получится строка, которую уже можно будет сохранить в localStorage. Затем, когда нам понадобится достать этот объект обратно - преобразуем строку из JSON обратно в объект - и спокойно им пользуемся.

Давайте рассмотрим этот процесс на примере. Сериализуем объект и сохраним в локальное хранилище:

//Дан объект: var obj = {name: "Иван", arr: }; //Сериализуем его в "{"name": "Иван", "arr": }": var json = JSON.stringify(obj); //Запишем в localStorage с ключом obj: localStorage.setItem("obj", json);

Через некоторое время получим объект обратно:

//Получим данные обратно из localStorage в виде JSON: var json = localStorage.getItem("obj"); //Преобразуем их обратно в объект JavaScript: var obj = JSON.parse(json); console.log(obj);

Дополнительные возможности

Определение количества записей в хранилище: alert(localStorage.length).

Определение названия ключа по его номеру: alert(localStorage.key(номер)).

При выполнении операций с хранилищем, срабатывает событие onstorage . Если к этому событию привязать функцию - то в ней будет доступен объект Event со следующими свойствами:

function func(event) { var key = event.key; //ключ изменяемых данных var oldValue = event.oldValue; //старое значение var newValue = event.newValue; //новое значение var storageArea = event.storageArea; //storageArea }

Доп. материал

Хранение массива в локальном хранилище: https://youtu.be/sYUILPMnrIo

Что вам делать дальше:

Приступайте к решению задач по следующей ссылке: задачи к уроку .

Когда все решите - переходите к изучению новой темы.

• Урок №
  плейлист на ютуб
  Практическое применение ES6

Некоторые видео могут забегать вперед, тк к этому месту учебника мы прошли еще не весь ES6. Просто пропускайте такие видео, посмотрите потом.

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