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

мой случай: 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;
});

15 ответов


должно быть сделано так, а не с оператором delete:

localStorage.removeItem(key);

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

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

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

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

Примечание:onbeforeunload метод должен возвращать строку.


С window ключевое слово Global:-

 window.localStorage.removeItem('keyName');

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


попробуйте использовать

$(window).unload(function(){
  localStorage.clear();
});

надеюсь, что это работает для вас


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

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


использовать sessionStorage

объект sessionStorage равен объекту localStorage, за исключением того, что он хранит данные только для одного сеанса. Данные удаляются, когда пользователь закрывает окно браузера.

в следующем примере подсчитывается количество раз, когда пользователь нажимает кнопку, в текущем сеансе:

пример

if (sessionStorage.clickcount) {
    sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
} else {
    sessionStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "You have clicked the button " +
sessionStorage.clickcount + " time(s) in this session.";

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

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). Адаптировано из: http://www.w3schools.com/html/html5_webstorage.asp.


Я не думаю, что представленное здесь решение на 100% правильно, потому что окно.onbeforeunload событие вызывается не только при закрытии браузера/вкладки(что требуется), но и на всех других нескольких событиях. (ЧТО МОЖЕТ НЕ ПОТРЕБОВАТЬСЯ)

см. эту ссылку для получения дополнительной информации о списке событий, которые могут запускать окно.onbeforeunload:-

http://msdn.microsoft.com/en-us/library/ms536907 (VS.85).aspx


Почему бы не использовать sessionStorage?

"объект sessionStorage равен объекту localStorage, за исключением того, что он хранит данные только для одного сеанса. Данные удаляются, когда пользователь закрывает окно браузера."

http://www.w3schools.com/html/html5_webstorage.asp


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

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

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

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


        for (let i = 0; i < localStorage.length; i++) {
        if (localStorage.key(i).indexOf('the-name-to-delete') > -1) {
          arr.push(localStorage.key(i));
        }
      }

for (let i = 0; i < arr.length; i++) {
        localStorage.removeItem(arr[i]);
      }

  • очистить локальное хранилище после закрытия браузера (или всех вкладок домена)
  • сохранить локальное хранилище на вкладках, если хотя бы одна вкладка остается активной
  • сохранить локальное хранилище при перезагрузке одной вкладки

выполните этот фрагмент javascript на начало каждой загрузки страницы для достижения вышеуказанного:

((nm,tm) => {
    const
            l = localStorage,
            s = sessionStorage,
            tabid = s.getItem(tm) || (newid => s.setItem(tm, newid) || newid)((Math.random() * 1e8).toFixed()),
            update = set => {
                let cur = JSON.parse(l.getItem(nm) || '{}');
                if (set && typeof cur[tabid] == 'undefined' && !Object.values(cur).reduce((a, b) => a + b, 0)) {
                    l.clear();
                    cur = {};
                }
                cur[tabid] = set;
                l.setItem(nm, JSON.stringify(cur));
            };
    update(1);
    window.onbeforeunload = () => update(0);
})('tabs','tabid');

вы можете попробовать следующий код для удаления локального хранилища:

delete localStorage.myPageDataArr;

Это будет работать как шарм, если u использует AngularJS

$localStorage.$reset();