Сохранение значения переменной JS после обновления страницы

Быстрый ответ

Если вам необходимо сохранить значение переменной JavaScript после перезагрузки страницы, примените localStorage или sessionStorage. Представляем примеры их использования:

// Допустим, ваша миссия — запомнить секретное имя супергероя
localStorage.setItem('secretIdentity', 'значение');

// Секретное имя супергероя остается с вами даже после перезагрузки страницы!
let значение = localStorage.getItem('secretIdentity');

Для временного хранения данных в пределах одного сеанса браузера воспользуйтесь sessionStorage — все сохраненные данные будут удалены при закрытии вкладки. Для сохранения сложных объектов применяйте JSON:

// Допустим, вы должны запомнить план спасения мира
localStorage.setItem('worldSavingPlans', JSON.stringify({ secretPlan: 'Не оставить и крохи от пиццы!' }));

// А теперь давайте вспомним его
let объект = JSON.parse(localStorage.getItem('worldSavingPlans'));

Учтите, что указанные методы подходят только для работы со строками. Чтобы сохранять объекты, используйте JSON.stringify() и для извлечения данных — JSON.parse().

Различные варианты хранения данных для разных суперзадач

Ваш выбор инструмента для хранения данных зависит от той задачи, которую вы хотите выполнить:

1. Сохранение данных после перезагрузки браузера

Если вам нужно, чтобы информация оставалась доступной после перезагрузки браузера, вам поможет localStorage.

Подробнее об этом расскажет наш спикер на видео

2. Хранение данных в течение одной сессии

sessionStorage идеально подходит для краткосрочного сохранения данных — они будут уничтожены после закрытия вкладки.

3. Обмен данными между доменами

Для обмена данными между разными доменами можно использовать свойство window.name. Однако учтите, что это не самый надежный способ защиты информации.

4. Поддержка старых версий браузеров

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

5. Абстракция функционала хранения

Чтобы избежать дублирования кода и облегчить работу с хранилищем, можно воспользоваться такими библиотеками, как localForage.

6. Хранение конфиденциальных данных

Не храните конфиденциальные данные на стороне клиента без шифрования для их защиты от несанкционированного доступа.

7. Динамическое обновление данных в хранилище

Если вам необходимо обновлять сохраненные значения без перезагрузки страницы, используйте DOM-события:

// В любой момент можно изменить секретное имя супергероя
yourSecretIdentity.addEventListener('change', (event) => {
  localStorage.setItem('secretIdentity', event.target.value);
});

8. Работа со сложными данными

Храните сложные объекты, используя JSON.stringify() для сериализации перед сохранением и JSON.parse() для извлечения данных.

Визуализация

Сохранение значения переменной JavaScript при перезагрузке страницы аналогично записи на магнитной заметке:

Представьте, что у вас есть магнитная заметка, прикрепленная к холодильнику (🗒️).

Перед тем, как выйти из дома, вы делаете запись: "Купить пиццу" 🍕️✏️

**Перезагрузка страницы** это как выход из дома и возвращение назад:
🚪🏃‍♂️💨 -> 🚪🔙

Когда вы возвращаетесь домой:
Запись на заметке (🗒️) все еще гласит: "Купить пиццу". ✅️🍕️

Это аналогично выполнению следующих действий:
- localStorage.setItem('reminder', 'Купить пиццу');
- а затем возвращение и восстановление значения: localStorage.getItem('reminder');

LocalStorage, подобно магнитной заметке, сохраняет ваше сообщение (🍕️), даже если вы ушли и вернулись (🚪🔙).

Советы по использованию веб-хранилищ

Вот несколько принципов, которые стоит учесть при использовании localStorage и sessionStorage:

Синхронизация данных и резервное копирование

Для безопасности важных данных делайте резервное копирование на сервере и настраивайте синхронизацию между устройствами.

Совместимость с различными браузерами

Проверяйте поддержку веб-хранилища браузерами на caniuse.com и гарантируйте работоспособность вашего приложения в разноплановых браузерах.

Защита от XSS-атак

Всегда проверяйте и очищайте данные перед их сохранением для защиты от XSS-атак.

Ограничение размера хранилища

Учтите, что объем localStorage и sessionStorage ограничивается 5МБ на домен, что важно учесть при проектировании.

Влияние на производительность

Операции с веб-хранилищами могут замедлить работу вашего приложения из-за ввода-вывода данных. Поэтому используйте их обдуманно и без излишеств.

Асинхронное хранилище

Для неблокирующего IO в вашем приложении рассмотрите асинхронные API хранилищ.

Полезные материалы

1. Web Storage API – Веб-API | MDN — Детальное руководство по API веб-хранилища.
2. HTML Веб-хранилище API — Понятное объяснение использования веб-хранилища для начинающих.
3. HTML Стандарт — Официальное описание localStorage в спецификации HTML.
4. HTML Стандарт — Официальное описание sessionStorage в HTML стандартах.
5. Вводная статья о различных типах браузерного хранилища | CSS-Tricks — Глубокое сравнение разных способов хранения данных в браузерах.
6. LocalStorage, sessionStorage — Подробное изложение localStorage и sessionStorage.
7. Хранилище для веба | Статьи | web.dev — Мнение Google об использовании и лучших практиках работы с веб-хранилищем.