Очистка localStorage при закрытии браузера: код и советы

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

Для удаления элемента из localStorage при закрытии окна или вкладки вы можете использовать событие window.onbeforeunload:

window.onbeforeunload = () => localStorage.removeItem('ключДляУдаления');

Вместо 'ключДляУдаления' укажите имя ключа, который подлежит удалению из вашего localStorage. Такой код обеспечит удаление указанного элемента при прекращении работы с вкладкой или окном.

Особенности работы с

Событие window.onbeforeunload — не идеальное решение: оно может испытывать сложности в работе, исходящие из стремления браузеров заботиться о защите пользователей от навязчивых действий, что впоследствии может влечь за собой определенные ограничения.

Использование

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

Привязывание удаления к определенным событиям

Рекомендуется связать удаление данных localStorage.removeItem(key) с определенными действиями пользователя, например, с нажатием на кнопку или перемещением между страницами. Иногда использование onbeforeunload может не обосновывать себя.

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

Можно восприиметь localStorage как кладовую для ценных данных:

Хранение 😌: [🧳, 🎩, 🔑 (Ваши данные)] // Кладовая пока открыта

При закрытии вкладки происходит хранение:

Очищение 💼: [ ] // Все забрано

Перед уходом вы удаляете свои данные:

window.onbeforeunload = function() {
    // Волшебная исчезновения!
    localStorage.removeItem('вашКлюч'); 
}

Такой подход обеспечивает сохранность информации при посещении ресурса и её автоматическое удаление после ухода.

Очистка нескольких ключей

Если есть необходимость очистить сразу несколько элементов из localStorage, вы можете воспользоваться следующим решением:

function удалитьМассово() {
  const arrayOfKeys = ['ключ1', 'ключ2', 'ключ3'];
  
  arrayOfKeys.forEach((key) => {
    // Время для очистки!
    localStorage.removeItem(key);
  });
}

window.onbeforeunload = удалитьМассово;

Замените 'ключ1', 'ключ2', 'ключ3' на свои ключи, чтобы при каждом уходе с сайта происходило очищение localStorage.

Полная очистка: удаление всех элементов

Если вам нужно удалить все содержимое localStorage, примените localStorage.clear();. Не забывайте, что это действие равнозначно полной очистке: после такой "уборки" не останется ничего.

Подтверждение намерений пользователя

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

window.onbeforeunload = function(e) {
  // Уверены ли вы в своем желании уйти? 🥺
  e.preventDefault();
  e.returnValue = '';
  // Здесь вы можете запустить процедуру удаления данных, если это необходимо
};

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

Событие onbeforeunload может вести себя по-разному в разных браузерах. Поэтому важно проверить работоспособность вашего кода во всех браузерах, которые используют ваши посетители.

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

1. Window: localStorage property – Web APIs | MDN — документация по localStorage.
2. Window: beforeunload event – Web APIs | MDN — описание события beforeunload, активируемого при закрытии вкладки или окна.
3. Ajax request with JQuery on page unload – Stack Overflow — обсуждение механизма unload и очистки localStorage.
4. Storage for the web | Articles | web.dev — обзор вариантов хранения данных в вебе и лучших практик.
5. local storage – Clearing localStorage in javascript? – Stack Overflow — методы и примеры удаления данных из localStorage.
6. A Primer on the Different Types of Browser Storage | CSS-Tricks – CSS-Tricks — обзор различных методов браузерного хранения данных, включая localStorage.