sessionStorage и localStorage

11 июля, 2020

В этой статье познакомимся с веб-хранилищами sessionStorage и localStorage, изучим методы JavaScript для работы, узнаем про их отличия друг от друга, и от файлов cookie, а также рассмотрим примеры использования в Google Tag Manager.

Самая большая проблема при использовании cookie в качестве локального хранилища заключается в том, что:

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

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

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

Существуют два основных типа веб-хранилища:

сессионное хранилище (sessionStorage);
локальное хранилище (localStorage);

Оба типа являются свойствами глобального объекта браузера (window). К ним можно обращаться как window.sessionStorage (или sessionStorage) и window.localStorage (или localStorage) соответственно. В них можно хранить ТОЛЬКО СТРОКОВЫЕ ДАННЫЕ для ключей и их значений.

Разберем каждый из них подробнее.

sessionStorage (сессионное хранилище, хранилище сессии)

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

Объект sessionStorage используется гораздо реже, чем localStorage.

localStorage (локальное хранилище)

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

Каждый домен имеет доступ к своему хранилищу данных localStorage. Например, localStorage, используемый для, https://osipenkov.ru является отдельным от localStorage, используемым для https://coobiq.com. Субдомены (поддомены) и различные протоколы HTTP (HTTP и HTTPS) имеют независимые друг от друга хранилища данных. Например, localStorage https://gtm.osipenkov.ru используется полностью отдельно от https://osipenkov.ru. Точно так же localStorage https://osipenkov.ru используется отдельно от http://osipenkov.ru.

Некоторые браузеры блокируют localStorage в режиме инкогнито. localStorage работает даже с отключенными cookie.

Примечание: не храните в localStorage конфиденциальную информацию и личные данные пользователией, включая имя, фамилию, дату рождения, пароли, номера кредитных карт, номер телефона, e-mail и многое другое.

Что можно хранить и для чего использовать?

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

Поскольку мы работаем с данными, то можем сохранять в sessionStorage и localStorage все, что связано с идентификацией пользователя - User-Agent, местоположение, IP-адрес, уникальный идентификатор пользователя (Client ID), значение сгенерированного промокода от виджета на сайте, источник перехода, список товаров, добавленных в корзину, пользовательские данные при неудачной попытке отправки на сервер и другие параметры.

Посмотреть, что из себя представляют sessionStorage и localStorage, какие данные там хранятся у разных сайтов, можно в консоли разработчика на вкладе Application (для браузера Google Chrome).

Веб-хранилище (вкладка Application)

Либо использовать команды sessionStorage и localStorage на вкладке Console:

Команда sessionStorage или localStorage (вкладка Console)

Как видим из примера выше, на моем сайте в localStorage хранится достаточно много данных. Большая часть из них - это установленные ключ/значение от онлайн консультанта Talk-Me. Сервис записывает в локальное хранилище данные о приветственном сообщении, времени совершения события, регионе, IP-адресе пользователя, источнике перехода, о последней просмотренной странице и многом другом. Вся эта информация по каждому пользователю потом предоставляется в виде краткого набора данных. Например, вот так выглядит информация по одному из чатов в мобильном приложении Talk-Me:

Карточка пользователя по одному из чатов

sessionStorage vs localStorage vs cookies

Нагляднее всего продемонстрировать отличия между sessionStorage, localStorage и cookies с помощью таблицы:

Отличие cookies от sessionStorage и localStorage

Размер: куки ограничены 4 Кбайт, sesionStorage - 5 МБайт, а localStorage - от 5 до 10 Мбайт;
Поддержка браузера: cookies были еще в стандарте HTML4, в то время как sessionStorage и localStorage появились в HTML5;
Отправка при запросе: можно передать куки при отправке запроса, а sessionStorage и localStorage нет;
Срок жизни: для файлов cookie мы можем задать период жизни, данные в sessionStorage удаляются после закрытия вкладки браузера, а в localStorage они не удаляются "никогда";
Место хранения: куки хранятся и в браузере, и на сервере, а sessionStorage и localStorage только локально в браузере пользователя;
Доступность: данные о пользователе в cookies и localStorage доступны из любого окна, при условии, что вы осуществляется заход под теми же данными (например, авторизуетесь на сайте), в то время как sessionStorage работает только из того же окна, а изменение вкладки браузера приведет к удалению информации.

Помимо этого, согласно правилам обработки персональных данных, установленных Генеральным регламентом ЕС о защите персональных данных (или GDPR — General Data Protection Regulation), владелец сайта должен получать разрешение от пользователей на использование файлов cookie. Для локального хранилища этого не требуется.

Как вы уже знаете, сейчас в части браузеров используется технология "умной защиты от слежения", которая предоставляет отчеты о заблокированных трекерах (в том числе и счетчиках веб-аналитики), тем самым препятствуется слежение за пользователями и показ им персонализированной рекламы с помощью файлов cookie. Хоть мы и можем устанавливать срок жизни куки, их время все равно зависит от настроек самих браузеров. Например, система интеллектуального отслеживания (Intelligent Tracking Prevention, ITP 2.2) Apple ограничивает в Safari использование основных файлов cookie (first-party) до 1 дня. В результате файлы cookie, установленные рекламными сервисами, например, Facebook, Google или Яндексом, для измерения трафика сайта и атрибуции рекламы, будут удалены через 24 часа. И если человек нажимает на рекламное объявление в пятницу, а затем решает отложить покупку в выходные, то в понедельник у нас уже не будет cookie, чтобы показать ему рекламу и напомнить о приобретении. Остается только надеется на то, что человек запомнил наш сайт и вернется сам.

Чтобы отслеживать пользователей больше этого времени, можно использовать localStorage. Но и тут разочарование относительно пользователей Safari. В последних обновлениях разработчики добавили ограничение в 7 дней, то есть срок жизни данных в локальном хранилище теперь ограничен. Когда пользователь просматривает сайт через Safari, счетчик становится равен 7 дням. В течение этого времени он должен повторно вернуться на сайт, чтобы мы смогли использовать информацию из локального хранилища. В противном случае данные по истечении этого времени будут удалены из localStorage.

Так или иначе, sessionStorage и localStorage активно используются разработчиками при разработке веб-приложений, а интернет-маркетологами как альтернатива файлам cookie. В блоге Симо Ахавы (Simo Ahava) есть статья, которая посвящена хранению Client ID в localStorage для Google Analytics.

Методы и свойства

Объекты хранилища sessionStorage и localStorage предоставляют одинаковые методы и свойства:

setItem(key, value) – сохранить пару ключ/значение;
getItem(key) – получить данные по ключу key;
removeItem(key) – удалить данные с ключом key;
clear() – удалить все;
key(index) – получить ключ на заданной позиции;
length – количество элементов в хранилище.

Запись данных в хранилище

Функция setItem(key, value) принимает ключ в качестве первого аргумента и значение в качестве второго аргумента. Как упоминалось ранее, все данные должны быть строками. Примеры установки:

sessionStorage.setItem("google", "Analytics"); // ключ "google", а значение "Analytics"
localStorage.setItem ("google", "Tag Manager"); // ключ "google", а значение "Tag Manager"

1 2	sessionStorage.setItem("google", "Analytics"); // ключ "google", а значение "Analytics" localStorage.setItem ("google", "Tag Manager"); // ключ "google", а значение "Tag Manager"

Попробовать сохранить пару ключ/значение можно в консоли разработчика на вкладке Console:

Сохранение ключа и значения в sessionStorage и localStorage

Перейдя на вкладку Application, мы увидим записанные в хранилище данные:

Вкладка Application с установленными значениями sessionStorage и localStorage

Если мы закроем и откроем вкладку вновь, то данные в localStorage сохранятся, а в sessionStorage удалятся.

Записать данные в хранилище можно несколькими способами:

localStorage.setItem("key", "value");
localStorage.key = "value";
localStorage["key"] = "value";

localStorage.setItem("key", "value");

localStorage.key = "value";

localStorage["key"] = "value";

Аналогично и для sessionStorage.

Как правило, интернет-маркетологи самостоятельно не записывают данные в sessionStorage или localStorage с помощью setItem. Это задача больше относится к разработчикам. Мы чаще извлекаем какие-то данные из переменных при помощи getItem, используя диспетчер тегов Google. Но знать о том, как сохранять (записывать) пару ключ/значение будет полезным.

Получение данных из хранилища

Функция getItem(key) берет ключ, который использовался при сохранении данных в качестве аргумента. Чтобы извлечь значение из ключей, которые мы сохранили, необходимо написать следующее:

sessionStorage.getItem("google"); // задается ключ "google",  а отобразится значение "Analytics"
localStorage.getItem ("google"); // задается ключ "google", а отобразится значение "Tag Manager"

1 2	sessionStorage.getItem("google"); // задается ключ "google", а отобразится значение "Analytics" localStorage.getItem ("google"); // задается ключ "google", а отобразится значение "Tag Manager"

В консоли разработчика получим:

Извлечение данных из sessionStorage и localStorage

Считать данные из хранилища также можно несколькими способами:

localStorage.getItem("key");
localStorage.key;
localStorage["key"];

localStorage.getItem("key");

localStorage.key;

localStorage["key"];

Аналогично и для sessionStorage.

Чтобы извлечь данные из sessionStorage и localStorage с помощью Google Tag Manager, необходимо создать пользовательскую переменную типа Собственный код JavaScript со следующим кодом для sessionStorage:

function() {
  var sStorage = sessionStorage.getItem('key');
  return sStorage;
}

function() {

var sStorage = sessionStorage.getItem('key');

return sStorage;

}

и для localStorage:

function() {
  var lStorage = localStorage.getItem('key');
  return lStorage;
}

function() {

var lStorage = localStorage.getItem('key');

return lStorage;

}

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

Пример переменной в Google Tag Manager:

Пример переменной localStorage в GTM

Если все сделано правильно, в режиме предварительного просмотра на вкладке Variables можно увидеть значение нашего ключа "google" в формате строки (string):

Значение localStorage в режиме отладки GTM

Удаление данных из хранилища

Имеет всего один синтаксис removeItem(key):

localStorage.removeItem("key");
sessionStorage.revomeItem("key");

1 2	localStorage.removeItem("key"); sessionStorage.revomeItem("key");

Удаление всех данных из хранилища

В любой момент вы можете удалить все записи командой .clear():

localStorage.clear();
sessionStorage.clear();

1 2	localStorage.clear(); sessionStorage.clear();

Количество записей в хранилище

Для того, чтобы получить общее количество записей в хранилище, необходимо использовать стандартное свойство length:

localStorage.length
sessionStorage.length

1 2	localStorage.length sessionStorage.length

На момент написания материала для osipenkov.ru было следующее количество записей в хранилище:

Количество записей в хранилищах

Получение всех записей хранилища

Получить все данные, записанные в хранилище, можно с помощью цикла:

for (var i = 0; i < localStorage.length; i++) {
  var key = localStorage.key(i);
  console.log(key + ' = ' + localStorage[key]);
}

for (var i = 0; i < localStorage.length; i++) {

var key = localStorage.key(i);

console.log(key + ' = ' + localStorage[key]);

}

Аналогично для sessionStorage, только в коде нужно заменить local на session.

Хранение объектов

Как мы уже знаем, в localStorage для ключей и значений можно использовать только строковый тип данных. Если мы попытаемся сохранить любой другой тип данных, он преобразует его в строку. Давайте разберем небольшой пример и создадим объект с несколькими переменными внутри:

var company = {
firstName: "Larry",
lastName: "Page",
age: 47
};

localStorage.setItem("google", company);

var company = {

firstName: "Larry",

lastName: "Page",

age: 47

};

localStorage.setItem("google", company);

Объект company содержит в себе несколько переменных (firstName, lastName, age) с разными типами данных. Записав данные в хранилище, в консоли разработчика мы получим значение [object Object]:

Конвертация объекта JavaScript в строку приводит к [object Object]

Чтобы правильно хранить объекты JavaScript в localStorage, нужно сначала преобразовать наш объект в JSON строку. Для этого используется функция функцию JSON.stringify(). Таким образом вместо localStorage.setItem("google", company); нужно написать:

localStorage.setItem("google", JSON.stringify(company));

1	localStorage.setItem("google", JSON.stringify(company));

Тогда значение в Value изменится и наш объект будет корректно отображаться:

Использование JSON.stringify()

Если вы извлечем данные с помощью getItem и посмотрим на тип, то увидим, что он является строкой (string):

localStorage.getItem("google"); // "{"firstName":"Larry","lastName":"Page","age":47}"
typeof "google" // "string"

1 2	localStorage.getItem("google"); // "{"firstName":"Larry","lastName":"Page","age":47}" typeof "google" // "string"

А строковые значения перебрать в цикле не получится. Для этого нам нужно преобразовать строку localStorage обратно в объект с помощью функции JSON.parse():

JSON.parse(localStorage.getItem("google"));

1	JSON.parse(localStorage.getItem("google"));

Теперь мы можем работать с объектом и извлекать из него определенные значения. Например, давайте выведем значение из ключа lastName.

JSON.parse(localStorage.getItem("google")).lastName
"Page"

1 2	JSON.parse(localStorage.getItem("google")).lastName "Page"

В Google Tag Manager используйте следующий код для получения определенного значения из массива с помощью переменной типа Собственный код JavaScript:

function() {
  var object = JSON.parse(localStorage.getItem('google'));
  return object.lastName;
}

function() {

var object = JSON.parse(localStorage.getItem('google'));

return object.lastName;

}

, где google - ваш ключ, а .lastName - конкретная переменная внутри массива, значение которой хотите извлечь.

Вот мы и познакомились с веб-хранилищами sessionStorage и localStorage, узнали про их отличия друг от друга, и от файлов cookie, а также рассмотрели примеры получения данных с помощью Google Tag Manager.

Материалы, использованные при написании статьи:

Метки: cookie, Google Tag Manager, localStorage, sessionStorage

sessionStorage и localStorage

Получайте бесплатные уроки и фишки

Еще статьи