[javascript] Как удалить элемент localStorage при закрытии окна браузера / вкладки?


Answers

Вы можете использовать событие beforeunload в JavaScript.

Используя ванильный JavaScript, вы можете сделать что-то вроде:

window.onbeforeunload = function() {
  localStorage.removeItem(key);
  return '';
};

Это приведет к удалению ключа до закрытия окна браузера / вкладки и предложит подтвердить действие закрытия окна / вкладки. Надеюсь, это решит вашу проблему.

ПРИМЕЧАНИЕ. Метод onbeforeunload должен возвращать строку.

Question

Мой случай: localStorage с ключом + значение, которое должно быть удалено при закрытии браузера, а не одной вкладке.

Пожалуйста, посмотрите мой код, если он правильный и что можно улучшить:

//create localStorage key + value if not exist
if(localStorage){
   localStorage.myPageDataArr={"name"=>"Dan","lastname"=>"Bonny"}; 
}

//when browser closed - psedocode
$(window).unload(function(){
  localStorage.myPageDataArr=undefined;
});



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

Я бы лучше объяснил, дайте код. Сначала сохраните то, что вам нужно, в localStorage, затем также в localStorage создайте счетчик, который будет содержать количество открываемых вкладок. Это будет увеличиваться каждый раз, когда страница загружается и уменьшается каждый раз, когда страница выгружается. Здесь вы можете выбрать, какие события использовать, я бы предложил «загрузить» и «разгрузить». В то время, когда вы выгружаетесь, вам нужно выполнить задачи очистки, которые вы хотите, когда счетчик достигнет 0, а это означает, что вы закрываете последнюю вкладку. Вот сложная часть: я не нашел надежного и общего способа рассказать разницу между перезагрузкой страницы или навигацией внутри страницы и закрытием вкладки. Поэтому Если хранящиеся данные не являются чем-то, что вы можете восстановить при загрузке после проверки, что это ваша первая вкладка, вы не можете удалить ее при каждом обновлении. Вместо этого вам нужно сохранить флаг в sessionStorage при каждой загрузке, прежде чем увеличивать счетчик табуляции. Прежде чем сохранить это значение, вы можете сделать чек, чтобы узнать, имеет ли он уже значение, а если нет, это означает, что вы загружаетесь в этот сеанс в первый раз, что означает, что вы можете выполнить очистку при загрузке, если это значение не установлено, а счетчик равен 0.




Это будет работать как шарм

$localStorage.$reset(); 



Хотя некоторые пользователи уже уже ответили на этот вопрос, я приводил пример настроек приложения для решения этой проблемы.

Я была такая же проблема. Я использую https://github.com/grevory/angular-local-storage модуль в моем приложении angularjs. Если вы настроите свое приложение следующим образом, оно сохранит переменную в хранилище сеансов вместо локального хранилища. Поэтому, если вы закроете браузер или закроете вкладку, хранилище сеансов будет удалено автоматически. Вам не нужно ничего делать.

app.config(function (localStorageServiceProvider) {
  localStorageServiceProvider
  .setPrefix('myApp')
  .setStorageType('sessionStorage')
});

Надеюсь, это поможет.




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

if(typeof(Storage)!=="undefined") {
  console.log("localStorage and sessionStorage support!");
  console.log("About to save:");
  console.log(localStorage);
  localStorage["somekey"] = 'hello';
  console.log("Key saved:");
  console.log(localStorage);
  localStorage.removeItem("somekey");  //<--- key deleted here
  console.log("key deleted:");
  console.log(localStorage);
  console.log("DONE ===");
} else {
  console.log("Sorry! No web storage support..");
}

Он работал для меня, как и ожидалось (я использую Google Chrome). Адаптировано из: w3schools.com/html/html5_webstorage.asp .




Использовать с ключевым словом global:

 window.localStorage.removeItem('keyName');



Related