У разработчиков веб-сайтов иногда возникает необходимость хранить некоторые данные в браузере пользователя. Такое хранение часто используется для восстановления измененного состояния страницы после ее перезагрузки либо закрытия браузера. В этой статье мы рассмотрим один из способов хранения данных на клиенте — LocalStorage. Вы узнаете, что такое LocalStorage, его преимущества и недостатки по сравнению с другими способами. А также мы разберем, как с ним работать и в каких случаях можно использовать.
Что такое LocalStorage и для чего он нужен
Допустим, вы смотрите какой-либо видеоролик на сайте и желаете остановиться на определенном месте, чтобы потом с него продолжить просмотр. Вы нажимаете на паузу и закрываете браузер. В следующий раз вы заходите на этот сайт и видите, что видео остановлено ровно на той временной точке, когда вы нажали кнопку паузы.
Как реализовать подобную ситуацию на веб-ресурсе, ведь переменные JavaScript не сохранят информацию после закрытия браузера? В этом нам может помочь LocalStorage — хранилище данных в браузере посетителя. Мы просто занесем время видеоролика в этой хранилище и достанем это время при следующем посещении пользователем страницы.
Данные в LocalStorage записываются в формате «ключ-значение». Значения всегда являются строками. Любой другой тип данных, переданный в качестве значения, будет преобразован в строковый.
Обычно в LocalStorage хранят какие-либо пользовательские настройки на клиенте, служебную информацию, различные изменения состояния в процессе взаимодействия со страницей, например, данные заполненных полей формы, чтобы они не удалялись после обновления веб-страницы.
Увидеть данные хранилища в своем браузере можно, открыв консоль разработчика в браузере. На примере браузера Chrome: находясь на нужной странице, нажмите кнопку F12 — появится консоль. Также ее можно вызывать через контекстное меню, нажав правую кнопку мыши в любом месте страницы и выбрав в меню «Просмотреть код».
В консоли разработчика сохраненная в LocalStorage информация находится на вкладке Applications. Раскрыв слева список Local Storage и выбрав нужный сайт, справа вы увидите ключи и значения, которые этот сайт сохраняет в браузере. Вы можете вручную удалить любую запись из хранилища с помощью контекстного меню либо кнопкой Delete.
Методы LocalStorage
Чтобы взаимодействовать с LocalStorage, необходимо получить доступ к объекту Storage с помощью свойства localStorage объекта window. У объекта Storage есть ряд методов, которые позволяют управлять значениями в веб-хранилище. Разберем этим методы.
В браузере существует похожее на LocalStorage хранилище — SessionStorage. Все методы и события, которые будут описаны ниже, также используются и в работе с SessionStorage. Различия этих хранилищ будут описаны в этой статье.
Убедимся, что, вызвав свойство localStorage у объекта window, получим объект Storage:
console.log(window.localStorage); // Storage // или console.log(localStorage); // Storage
Для установления пары ключ-значение в локальное хранилище используется метод setItem. Метод принимает два параметра: первый — ключ, второй — значение. Если ключ уже существует, его значение будет обновлено:
// Добавим ключ name со значением Andy Morley
localStorage.setItem('name', 'Andy Morley'); Чтобы получить сохраненное значение, нужно вызвать метод getItem с переданным ключом в качестве параметра:
const name = localStorage.getItem('name');
console.log('Извлеченное имя: ' + name); Удаляется пара ключ-значение методом removeItem, которому передается ключ удаляемой записи. После удаления вызов метода getItem с ключом удаленной записи вернет null:
localStorage.setItem('name', 'Andy Morley');
localStorage.removeItem('name');
const name = localStorage.getItem('name');
console.log('Здесь должен быть null: ' + name); Также есть возможность получить имя ключа по индексу пары ключ-значение:
localStorage.setItem('name', 'Andy Morley');
localStorage.setItem('age', '36');
// Получим ключ второй записи
const key = localStorage.key(1);
console.log('Ключ второй пары: ' + key); // age Обратите внимание, что индекс пар ключ-значение в локальном хранилище нумеруется с нуля, то есть первая пара ключ-значение имеет индекс 0, вторая — индекс 1 и т. д.
Количество хранящихся в LocalStorage пар ключ-значение можно узнать с помощью метода length:
const pairLength = localStorage.length;
console.log('Количество пар ключ-значение: ' + pairLength); Чтобы очистить локальное хранилище от всех данных, используют метод clear:
localStorage.clear();
console.log('Количество пар ключ-значение: ' + localStorage.length); // 0 Событие storage
Помимо методов, есть еще один способ взаимодействия с локальным хранилищем — событие storage. Оно запускается, когда происходят какие-либо изменения в LocalStorage (или SessionStorage) в текущем источнике.
После запуска события storage генерируется объект StorageEvent:
window.addEventListener('storage', function (event) { // event — объект StorageEvent
// логика после запуска события
}); Событие
storageзапускается только в других окнах или вкладках, имеющих тот же источник, что и окно (вкладка), которое внесло изменения в хранилище. Если изменение производится в том же окне (вкладке), событие не запускается.
У объекта StorageEvent есть ряд свойств, с помощью которых можно получить доступ к данным для применения их в обработчике события storage:
key: ключ записи, которая была изменена;oldValue: предыдущее значение пары ключ-значение, которая была изменена;newValue: новое значение пары ключ-значение, которая была изменена;url: URL-адрес документа, вызвавшего событие storage;storageArea: ссылка на измененный объект LocalStorage или SessionStorage.
Пример события storage:
// Слушаем изменения в LocalStorage
window.addEventListener('storage', function (event) {
console.log('Ключ измененной пары: ' + event.key, ' Предыдущее значение: ' + event.oldValue, ' Новое значение: ' + event.newValue, ' URL: ' + event.url, ' измененный объект хранилища: ', event.storageArea);
});
// Делаем любое изменение в localStorage
localStorage.setItem('fontSize', 'large'); В результате произойдет вызов события и распечатка описанных в обработчике данных.
Отличия LocalStorage от SessionStorage и Cookie
Помимо LocalStorage, существуют другие клиентские веб-хранилища: SessionStorage и Cookie. Сравним, в каких аспектах они отличаются между собой и когда использовать каждое из этих хранилищ:
- Размер. LocalStorage и SessionStorage предоставляет большой объем хранилища (более 5–10 Мб), в то время как файлы Cookie имеют небольшой размер — около 4 Кб.
- Срок действия данных: данные LocalStorage сохраняются даже после того, как пользователь закрывает вкладку или браузер, информация из SessionStorage доступна при открытой вкладке, а после ее закрытия данные удаляются. Файлы Cookie могут сохраняться в течение установленного периода времени или удаляться, когда пользователь закрывает браузер.
- Производительность: данные LocalStorage и SessionStorage хранятся непосредственно в браузере, что делает доступ к ним быстрее, чем файлы Cookie, которые необходимо отправлять с каждым HTTP-запросом.
- Использование: LocalStorage обычно используется для хранения на стороне клиента пользовательских настроек, данных форм и другой информации, которая должна сохраняться даже после того, как пользователь закроет браузер. Хранилище SessionStorage применяется для временных данных, которые нужны только на время сеанса пользователя. Файлы Cookie широко используются для аутентификации на стороне сервера, управления сеансами и отслеживания действия пользователя в интернете.
- Междоменный доступ: доступ к данным LocalStorage и SessionStorage возможен только с помощью сценариев из того же домена, в котором были созданы данные, а доступ к файлам Cookie возможен с помощью сценариев из любого домена, указанного в файле Cookie.
- Безопасность: LocalStorage и SessionStorage не имеют встроенных функций безопасности, а файлы Cookie могут быть помечены как безопасные и отправлены через соединения HTTPS. Также можно установить срок действия файлов Cookie через определенное время.
- Синхронизация: данные LocalStorage и SessionStorage хранятся локально на устройстве пользователя и не синхронизируются между несколькими устройствами или браузерами. Файлы Cookie, с другой стороны, могут храниться на устройстве пользователя и синхронизироваться между несколькими устройствами, если пользователь вошел в одну и ту же учетную запись.
Когда использовать LocalStorage, SessionStorage и Cookie
Выбор между LocalStorage, SessionStorage и файлами Cookie будет зависеть от конкретных требований вашего сайта. Вот несколько общих рекомендаций о том, когда использовать каждый из них:
- Используйте LocalStorage для работы с данными, которые должны сохраняться даже после того, как пользователь закрыл браузер или выключил свое устройство. Это хранилище хорошо подходит для хранения пользовательских настроек и не конфиденциальной информации пользователя.
- Выбирайте SessionStorage, когда хотите хранить данные только в течение всего сеанса пользователя при открытой вкладке. Например, содержимое корзины покупок интернет-магазина.
- Используйте Cookie, если вам нужно работать с HTTP-запросами. Пример — аутентификация.
Пример: LocalStorage и чекбоксы
Продемонстрируем работу локального хранилища с помощью примера. Создадим форму с чекбоксами. Эта форма должна функционировать так, чтобы при установке определенного количества флажков это же количество флажков отображалось при перезагрузке странице либо на новой вкладке.
HTML:
<form class='demoLocalStorage'>
<h4 class='demoLocalStorage__header'>
Выберите варианты, которые останутся выбранными после перезагрузки страницы
</h4>
<ul class='demoLocalStorage__list'>
<li>
<input type='checkbox' id='option1'>
<label for='option1'>Вариант 1</label>
</li>
<li>
<input type='checkbox' id='option2'>
<label for='option2'>Вариант 2</label>
</li>
<li>
<input type='checkbox' id='option3'>
<label for='option3'>Вариант 3</label>
</li>
<li>
<input type='checkbox' id='option4'>
<label for='option4'>Вариант 4</label>
</li>
<li>
<input type='checkbox' id='option5'>
<label for='option5'>Вариант 5</label>
</li>
</ul>
</form> CSS:
.demoLocalStorage {
background: #1c1c1c;
padding: 1.25em;
}
.demoLocalStorage__header {
font-size: 1.25em;
}
.demoLocalStorage__list {
margin: 0!important;
padding: 0!important;
list-style: none;
}
.demoLocalStorage__list input {
cursor: pointer;
}
.demoLocalStorage__list label {
font-size: 1em;
cursor: pointer;
} JavaScript:
// Начнем выполнять код после загрузки страницы
window.addEventListener('load', function () {
// Получим все чекбоксы формы
const options = document.querySelectorAll(".demoLocalStorage input[type='checkbox']");
for (let option of options) {
// Извлечем из хранилища значение каждого чекбокса по id (true или false)
// и, если оно 'true', то установим флажок
option.checked = (localStorage.getItem(option.id) === 'true');
// Повесим обработчик события на изменение чекбокса
option.addEventListener('change', handleCheckboxChange);
}
});
// Обработчик события изменения чекбокса
function handleCheckboxChange(event) {
// Сохраняем в хранилище id чекбокса и булевое значение, которое определяет, установлен ли флажок
localStorage.setItem(event.target.id, event.target.checked);
} Альтернативный вариант логики с помощью библиотеки jQuery:
jQuery(document).ready(function($) {
const options = $(".demoLocalStorage input[type='checkbox']");
options.each(function() {
$(this).prop('checked', localStorage.getItem($(this).attr('id')) === 'true');
});
options.change(function() {
localStorage.setItem($(this).attr('id'), $(this).prop('checked'));
});
}); Результат:
Вы можете проверить работу LocalStorage: установите любое количество флажков у чекбоксов и перезагрузите страницу — все флажки на своих местах.
Таким образом, LocalStorage — довольно несложный инструмент для хранения данных на стороне клиента. Используя его, не забывайте об особенностях и ограничениях работы с этим хранилищем. Обращайте внимание на безопасность: конфиденциальная информация не должна храниться в LocalStorage, так как она доступна любому скрипту, работающему на странице.