LocalStorage в JavaScript: подробное руководство

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

Общие сведения о localStorage и sessionStorage

LocalStorage и sessionStorage – это веб-хранилища, находящиеся в браузере пользователя и предназначенные для хранения данных.

Хранение информации в этих объектах осуществляется в формате «ключ-значение». Ключ и значение – это всегда строки.

Т.е., по сути, каждое хранилище представляет собой вот такой объект:

{
  'key1': 'value1',
  'key2': 'value2',
  'key3': 'value3',
  ...
}

Если в качестве значения указать не строку, а какой-то другой тип данных, например, объект, то он будет, перед тем как туда записан, автоматически преобразован в строку (т.е. так как будто мы для него явно вызвали метод toString()).

Таким образом, в localStorage и sessionStorage:

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

Где можно увидеть эти хранилища?

Например, в Google Chrome для этого необходимо открыть «Инструменты разработчика», перейти на вкладку «Application». Здесь они находятся на левой панели в разделе «Storage». При выборе источника вы увидите какие данные содержатся соответственно в sessionStorage и localStorage.

sessionStorage vs localStorage

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

В отличие от sessionStorage, localStorage хранит данные в течение неограниченного количества времени. Они сохраняются при закрытии браузера и выключения компьютера. Но, хоть эти данные могут храниться бесконечно в браузере, обычный пользователь может их удалить, например выполнив очистку истории (при включенной опции «файлы cookie и другие данные сайтов»).

localStorage vs cookies

Cookie и localStorage используются для хранения информации в браузере.

Но что лучше использовать в том или ином случае? Чтобы в этом вопросе ориентироваться необходимо знать различия между ними:

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

Что использовать: localStorage или cookie? На самом деле, ответ на этот вопрос очень прост. Если данные нужны на стороне сервера, то в этом случае лучше использовать cookie. Т.к. куки отправляются с каждым HTTP-запросом на сервер, а также их там можно установить (они добавляются в ответ и браузер при его получении их сохранит).

Если вы работаете с данными только на клиенте (в браузере), то тогда более предпочтительно использовать localStorage.

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

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

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

Работа с localStorage и sessionStorage

Для работы с localStorage и sessionStorage нам доступен одинаковый набор свойств и методов:

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

Событие storage

Событие storage предназначено для информирования о том, что локальное хранилище обновлено. При этом событие генерируется на всех вкладках, принадлежащих этому источнику, кроме той, которая вызвала эти изменения в localStorage.

Данное событие возникает на объекте window:

window.addEventListener('storage', event => {
  console.log(event);
});

Если посмотреть объект event, то среди свойств можно увидеть следующие:

• key – ключ, значение которого изменено (возвращает null при очистке хранилища);
• oldValue – предыдущее значение (null – если ключ только что был добавлен);
• newValue – новое значение (null – при удалении ключа);
• storageArea – изменённый объект-хранилище;
• url – url документа, в котором произошло обновление хранилища.

Создадим пример, который будет следить за изменениями в localStorage и обновлять в соответствии с ними данные на страницах.

Для этого создадим две страницы (например, «page-1.html» и «page-2.html») и поместим в них следующий код:

  <div id="list">
  <button type="button">Добавить</button>
  <ul></ul>
</div>

<script>
  const elementList = document.querySelector('#list');
  const elementBtn = elementList.querySelector('button');
  const elementUl = elementList.querySelector('ul');

  function updateStorage() {
    const data = [];
    for (let element of elementUl.querySelectorAll('li')) {
      data.push(element.textContent);
    }
    localStorage['items'] = JSON.stringify(data);
  }

  function updateUl(items) {
    const html = [];
    for (let item of items) {
      html.push(`<li>${item}</li>`);
    }
    elementUl.innerHTML = html.join('');
  }

  elementBtn.onclick = () => {
    const elementsLi = elementUl.querySelectorAll('li');
    const newLi = document.createElement('li');
    newLi.textContent = elementsLi.length + 1;
    elementUl.append(newLi);
    updateStorage();
  }

  window.onstorage = event => {
    updateUl(JSON.parse(event.newValue));
  }
</script>

Примеры использования localStorage

1. Добавим ключ в localStorage, после этого получим его значение, а затем удалим:

// добавим в localStorage ключ «bgColor» со значением «green»
localStorage.setItem('bgColor', 'green');
// получим значение ключа «bgColor» и сохраним его в переменную «bgColor»
const bgColor = localStorage.getItem('bgColor');
// удалим ключ «bgColor»
localStorage.removeItem('bgColor');

Кроме указанных методов, можно также использовать квадратные скобки:

localStorage['bgColor'] = 'green';
const bgColor = localStorage['bgColor'];
delete localStorage['bgColor'];

2. Удалим все элементы из хранилища localStorage:

localStorage.clear();

3. Переберём все ключи, находящиеся в localStorage:

// localStorage.length - количество ключей в хранилище
for (let i = 0, length = localStorage.length; i < length; i++) {
  // ключ
  const key = localStorage.key(i);
  // значение
  const value = localStorage[key];
  console.log(`${key}: ${value}`);
}

4. Пример, в котором сохраним объект в localStorage:

// объект
const obj = {
  prop1: 'value1',
  prop2: 'value2',
  prop3: 'value3'
}

//сохраним объект в LocalStorage предварительно преобразовав его в строку JSON
localStorage['mykey'] = JSON.stringify(obj);
// если ключ «mykey» имеется в localStorage, то...
if (localStorage['mykey'] {
  // получим из LocalStorage значение ключа «mykey» и преобразуем его с помощью метода JSON.parse() в объект
  const newObj = JSON.parse(localStorage['mykey']);
}

В этом коде сохранение объекта выполняется посредством его сериализации в строку JSON посредством JSON.stringify().

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

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

6. Попробуем добавить ключ в localStorage, но если в хранилище закончилось место (QUOTA_EXCEEDED_ERR), то выведем в консоль сообщение об этом:

try {
  localStorage['theme'] = 'dark';
} catch (e) {
  if (e == QUOTA_EXCEEDED_ERR) {
    console.log('Не достаточно места в localStorage');
  }
}

7. Добавим дату срока действия к элементам, которую затем будем использовать для их очистки (удалять те из них дата срока действия которых превышает текущую):

// данные полученные из localStorage
const data = [
  {
    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
  }
];
// новый массив
const newData = [];

// добавим в newData элементы, значение timestamp у которых больше текущей даты
newData.forEach(element => {
  if (element.timestamp > Date.now()) {
    newData.push(element);
  }
});

// сохраним newData в LocalStorage
localStorage.setItem('items', JSON.stringify(newData));

Задачи

1. Записать момент, на котором пользователь остановился при просмотре видео в localStorage, а затем восстанавливать его при открытии страницы.

2. Сохранить данные формы в хранилище, а затем восстановить их при перезагрузки страницы.

3. Написать код, сохраняющий историю просмотров страниц сайта в localStorage.