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

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;
});

Answer 1

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

localStorage.removeItem(key);

Answer 2

Использовать с window глобальным ключевым словом: -

 window.localStorage.removeItem('keyName');

Answer 3

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

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

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

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

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

Answer 4

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

Answer 5

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

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

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

Answer 6

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

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

Answer 7

use 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.";

Answer 8

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]);
}

Answer 9

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

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

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

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

Answer 10

Посмотрев на этот вопрос через 6 лет после того, как он был задан, я обнаружил, что до сих пор нет достаточного ответа на этот вопрос; который должен достичь всего следующего:

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

Выполните этот фрагмент 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');

Редактировать: Основная идея здесь следующая:

1. При запуске с нуля хранилищу сеансов назначается случайный идентификатор в ключе с именем tabid
2. Локальное хранилище затем устанавливается с помощью ключа tabs, содержащего объект, для которого ключ tabid устанавливается в 1.
3. Когда вкладка выгружена, локальное хранилище tabs обновляется до объекта, содержащего tabid, установленного в 0.
4. Если вкладка перезагружена, она сначала выгружается и возобновляется. Поскольку существует ключ tabid хранилища сеансов, а также ключ tabs локального хранилища с вложенным ключом tabid, локальное хранилище не очищается.
5. Когда браузер выгружен, все хранилище сеансов будет очищено. При возобновлении хранения сеанса tabid больше не будет существовать, и будет сгенерировано новое tabid. Поскольку в локальном хранилище нет подключа для этого tabid и других tabid (все сеансы были закрыты), он очищается.
6. После создания новой вкладки в хранилище сеансов генерируется новый tabid, но, поскольку существует хотя бы один tabs [tabid], локальное хранилище не очищается