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
являются свойствами глобального объекта window
. А это значит к ним можно обращаться соответственно как window.localStorage
и window.sessionStorage
, или просто 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
.
«Если»
Может подскажете решение, если оно существует?
В коде вам нужно сначала проверить, если ли данные в LocalStorage, а потом туда уже что-то записывать:
Эти файлы, как и cookies можно очистить (chrome://settings/cookies#cont). Надёжное хранилище — это только база данных на сервере.
у меня такая проблема: есть боковое меню, открытие/закрытие которого регулируется классами тэга body: site-menubar-unfold / site-menubar-fold соответственно. надо, чтобы при переходе на новую страницу выбранное состояние сохранялось. как это реализовать с помощью sessionStorage я примерно поняла, но как отследить изменение url? нагуглила только функцию hashchange, но «Событие hashchange генерируется когда изменяется идентификатор фрагмента URL (т.е. часть URL следующая за символом #, включая сам символ #).» а у меня меняется не идентификатор, а html-страница. например, localhost/project/idex.html -> localhost/project/stat.html
спасибо)
После этого вам необходимо добавить в обработчик этого события блок кода JavaScript, в котором происходит запись информации в хранилище.
Второй блок, в котором происходит считывание информации, необходимо выполнять после загрузки страницы:
Есть событие, которое происходит при выгрузке страницы, но его поддержка зависит от браузера. Поэтому его не рекомендуется использовать. Применяется оно так:
а страница может меняться при переходе по ссылкам внутри нее же или в том же меню