JavaScript - всё о localStorage и sessionStorage

В этой статье мы познакомимся с хранилищами браузера LocalStorage и SessionStorage. Рассмотрим их назначение, отличие друг от друга, и от cookies, а также самое основное разберём методы JavaScript для работы с ними.

Веб-хранилище. Назначение localStorage и sessionStorage

Веб-хранилище - это данные, хранящиеся локально в браузере пользователя. Существует 2 типа веб-хранилищ:

• LocalStorage;
• SessionStorage.

В них вы можете хранить информацию в формате ключ-значение. Ключ и значение – это всегда строки.

Если мы попытаемся сохранить в значение элемента хранилища другой тип значений, например, объект, то он будет, перед тем как туда записан, преобразован в строку. В данном случае посредством неявного у него вызова метода toString. Т.е. в значении элемента этих хранилищ кроме строкового типа данных никакого другого содержаться не может.

Отличие между этими хранилищами сводится только к периоду времени, в течение которого они могут хранить данные, помещенные в них:

• SessionStorage – выполняет это в течение определённого промежутка времени (сессии). Закрытие вкладки или браузера приводит их к удалению. При этом данные в SessionStorage сохраняются при обновлении страницы.
• LocalStorage – осуществляет это в течение неограниченного времени. Они сохраняются при перезагрузке браузера и компьютера. Их длительность хранения ничем не ограничена. Но, хоть эти данные могут храниться бесконечно в браузере, обычный пользователь может их очень просто удалить, например выполнив очистку истории (при включенной опции «файлы cookie и другие данные сайтов»).

Хранилище LocalStorage похоже на cookies. Оно также применяется для хранения данных на компьютере пользователя (в браузере). Но кроме общих сходств имеется также и много отличий.

Cookies vs. LocalStorage: В чём разница?

Отличия между cookies и LocalStorage:

• по месту хранения (куки и данные LocalStorage хранятся на компьютере пользователя в браузере);
• по размеру (cookies ограничены 4 Кбайт, а размер LocalStorage - 5 Мбайт);
• по включению этих данных в HTTP-заголовок (куки в отличие от данных локального хранилища включаются в состав запроса при отправке его на сервер, а также сервер их может добавлять в ответ при отправке его клиенту; таким образом cookies являются частью HTTP-протокола, и увеличивают объём передаваемых данных от клиента серверу и обратно);
• по доступности данных (печеньки можно прочитать и установить как на сервере, так и на клиенте; на клиенте доступны все куки, кроме тех, у которых установлен флаг HttpOnly; LocalStorage доступны только в браузере посредством JavaScript API);
• по времени хранения данных (куки хранятся ограниченное время (до конца сеанса или истечения указанной даты), нахождение данных в локальном хранилище не ограничено по времени);
• по удобству использования в JavaScript (работа с LocalStorage в JavaScript организовано намного удобнее чем с cookies);
• по необходимости информирования пользователей Евросоюза (при использовании cookies сайт в ЕС должен получать на это разрешение от пользователей; для данных локального хранилища это не требуется);
• по назначению (куки в основном используются для управления сеансом, персонализации и отслеживания действий пользователя, в то время как LocalStorage применяется в качестве обычного локального хранилища информации на компьютере пользователя).

Что использовать: LocalStorage или cookies? На самом деле, ответ на этот вопрос очень прост. Если вам не нужно отправлять данные с каждым HTTP-запросом на сервер, то в этом случае лучше использовать для хранения данных LocalStorage.

Безопасность данных

Хранилище LocalStorage привязана к источнику (домену, протоколу и порту). Данные, находящиеся в некотором источнике, доступны для всех сценариев страниц этого же источника. Из сценария, находящегося в одном источнике, нельзя получить доступ к данным, определяемым другим источником.

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

Итоги

Основные характеристики LocalStorage и SessionStorage:

• данные хранятся в виде пар «ключ-значение»;
• хранить можно только строки;
• если вам необходимо хранить в этих хранилищах массивы и объекты, то сначала вы должны их превратить в строки, например, используя метод JSON.stringify. Для преобразования строки обратно в массив или объект, можно использовать JSON.parse. Подробнее об этом позже.

Объекты localStorage и sessionStorage

Работа с веб-хранилищами в JavaScript выполняется через объекты localStorage и sessionStorage. Объекты localStorage и sessionStorage находятся в глобальном объекте window.

Они имеют одинаковый набор свойств и методов:

• getItem(key) - получить значение элемента хранилища по key;
• setItem(key,value) - установить для key указанное значение value (если в хранилище уже есть данные с этим ключом, то они будут переписаны);
• removeItem(key) - удалить элемент по key;
• clear() - удалить все элементы;
• key(index) - получить элемент по его индексу (в основном используется для перебора);
• length - свойство, с помощью которого можно получить количество элементов в хранилище;

Примеры

1. Пример, в котором добавим элемент в веб-хранилище, получим его значение по ключу, а затем удалим его:

// 1 - добавим в LocalStorage элемент с ключом «bgColor» и значением «green»
localStorage.setItem('bgColor', 'green');
// 2 - получим значение по ключу «bgColor» и сохраним его в переменную «bgColor»
var bgColor = localStorage.getItem('bgColor');
// 3 - удалим элемент из хранилища по ключу
localStorage.removeItem('bgColor');

2. Пример, в котором удалим все элементы из хранилища:

localStorage.clear();

3. Пример, в котором перебём все элементы LocalStorage:

<div id="result"></div>
...
<script>
  var output = '';

  // localStorage.length - количество элементов в хранилище
  for (var i = 0, length = localStorage.length; i < length; i++) {
    // localStorage.key(i) - получение ключа элемента по его индексу
    output += 'Ключ: ' + localStorage.key(i) + "; Значение: " + localStorage.getItem(localStorage.key(i)) + ".&lt;br&gt;";
  }
  
  document.querySelector('#result').innerHTML = output;
</script>

4. Пример, в котором запишем JavaScript объект в LocalStorage:

// 1 - JavaScript объект
var obj = {
  prop1: 'value1',
  prop2: 'value2',
  prop3: 'value3'
  // ...
}
// 2 - Сохраним JavaScript объект в LocalStorage преобразовав его в строку JSON
localStorage.setItem('mykey', JSON.stringify(obj));

// ...

// 3 - Получим из LocalStorage значение по ключу «mykey», если он там есть (т.е. если его значение не равно null)
if (localStorage.getItem('mykey')) {
  // 4 - Получим из LocalStorage значение по ключу «mykey», преобразуем его с помощью метода JSON.parse в JavaScript объект
  obj = JSON.parse(localStorage.getItem('mykey'));
}

Из этого примера видно, что если вам нужно в LocalStorage записать объект, то одним из вариантов решения этой задачи может стать его сериализация в строку JSON с помощью функции JSON.stringify.

5. Пример, в котором проверим поддерживает ли браузер веб-хранилище?

if (typeof(Storage) !== 'undefined') {
  // код для localStorage
} else {
  // браузер не поддерживает веб-хранилище
}

6. Пример, в котором покажем как можно добавить дату к записям, а затем её использовать для их очистки (например, удалять записи, если со времени её записи прошло уже более 30 дней):

// пример данных, которые мы получили из LocalStorage
var
  viewsItems = [
    {
      id: '1608467',
      title: '6.26" Смартфон Huawei Nova 5T 128 ГБ фиолетовый',
      timestamp: 1583020800000 // 01.03.2020
    },
    {
      id: '1348312',
      title: '6.1" Смартфон Huawei P30 128 ГБ синий',
      timestamp: 1585872000000 // 03.04.2020
    },
    {
      id: '1394820',
      title: '6.1" Смартфон Apple iPhone 11 128 ГБ черный',
      timestamp: 1586476800000 // 10.04.2020
    }
  ],
  newViewsItems = [];

// сформируем из массива viewsItems новый массив newViewsItems только из тех данных, timestamp которых не более 30 дней
for (var i = 0, length = viewsItems.length; i < length; i++) {
  if (viewsItems[i].timestamp > (Date.now() - 1000 * 60 * 60 * 24 * 30)) {
    newViewsItems.push(viewsItems[i]);
  }
}

// например, если текущая дата 11.04.2020, то в массив newViewsItems попадут все элементы, кроме первого

// сохраним новый массив, очищенный от старых записей в LocalStorage
localStorage.setItem('viewsItems', JSON.stringify(newViewsItems));

Тест скорости выполнения операций с данными в localStorage и cookie

Рассмотрим быстродействие (в процентном отношении), которое имеют методы при выполнении операций с данными в localStorage и cookie.

В качестве браузеров будем использовать Chrome 47, Firefox 42 и IE11, работающие на операционной системе Windows 7.

Тест 1. Быстродействие методов, осуществляющих чтение данных из localStorage и cookie.

Вывод: Современные браузеры выполняют операции чтения данных из хранилища localStorage намного быстрее, чем из cookie. В браузере Google Chrome это разница достигает нескольких десятков раз, в Firefox – 9 раз и в IE 11 – 2 раза.

Тест 2. Быстродействие методов, осуществляющих запись данных в localStorage и cookie.

Вывод: Операции записи данных в хранилище localStorage выполняются быстрее, чем в cookie, но не настолько как при чтении. Браузер Google Chrome выполняет запись в localSorage быстрее в 1.6 раза, Firefox в 7 раз, Internet Explorer 11 показал равнозначный результат.

Тест 3. Быстродействие браузеров, осуществляющих запись данных в localStorage и их чтение.

Вывод: Firefox показал довольно хорошие преимущества в быстродействии перед другими браузерами, и это касается не только технологии localStorage, но и cookie (диаграммы не приводятся).