Як видалити пункт 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;
});

слід робити так, а не з оператором delete:

localStorage.removeItem(key);

Використовувати з windowглобальним ключовим словом: -

 window.localStorage.removeItem('keyName');

Ви можете скористатися beforeunload подію в JavaScript.

Використовуючи ванільний JavaScript, ви можете зробити щось на кшталт:

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

Це видалить ключ до закриття вікна / вкладки браузера і запропонує підтвердити дію закриття вікна / вкладки. Я сподіваюся, що це вирішить вашу проблему.

ПРИМІТКА. onbeforeunloadМетод повинен повернути рядок.

Натомість слід використовувати 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.";

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

localStorage.removeItem(key);  //item

localStorage.clear(); //all items

Хоча деякі користувачі вже відповіли на це питання, я наводжу приклад налаштувань програми для вирішення цієї проблеми.

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

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

Сподіваюся, це допоможе.

Існує п'ять методів на вибір:

• setItem (): додавання ключа та значення до localStorage
• getItem (): Отримайте значення за допомогою ключа з localStorage
• removeItem (): видаліть елемент за допомогою ключа з localStorage
• clear (): Очистити всі локальні сховища
• key (): Введено номер для отримання n-го ключа localStorage

Ви можете використовувати clear (), цей метод при виклику очищає все сховище всіх записів для цього домену. Він не отримує жодних параметрів.

window.localStorage.clear();

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

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% правильним, тому що window.onbeforeunload подія викликається не тільки тоді, коли браузер / Tab закрито (ЯКІ ЗАБЕЗПЕЧЕННЯ), але і на всіх інших кількох подіях. (ЯКІ МОЖЕ НЕ ВИМАГАТИ)

Перейдіть за цим посиланням для отримання додаткової інформації про список подій, які можуть запустити window.onbeforeunload: -

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

чому б не використовували sessionStorage?

"Об'єкт sessionStorage дорівнює об'єкту localStorage, за винятком того, що він зберігає дані лише для одного сеансу. Дані видаляються, коли користувач закриває вікно браузера."

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

Переглянувши це запитання через 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 оновлюється до об'єкта, що містить tabid0.
4. Якщо вкладка буде перезавантажена, її спочатку завантажують та відновлять. Оскільки ключ пам’яті сеансу tabidіснує, так і місцеве сховищеtabs ключ з підкладом tabidлокальної пам’яті не очищається.
5. Коли браузер буде завантажений, все сховище сеансу буде очищено. Після відновлення сеансу зберігання tabidбільше не буде, і tabidбуде створено нове . Оскільки в локальному сховищі для цього немає підключенняtabid жодного , ані будь-якого іншогоtabid (всі сеанси були закриті), це очищено.
6. На новій створеній вкладці створюється нове tabidв сховищі сеансів, але оскільки існує принаймні одна tabs[ tabid], локальне сховище не очищається

Це давнє запитання, але, здається, жодна з наведених відповідей не є досконалою.

У разі , якщо ви хочете аутентифікації магазину або будь-якої конфіденційної інформації, які деградували тільки тоді , коли браузер закритий, ви можете розраховувати на sessionStorageіlocalStorage на передачу повідомлень з перехресними вкладками.

В основному ідея така:

1. Ви завантажуєте завантаження з жодної попередньої вкладки, таким чином і ваші, localStorageі sessionStorageпорожні (якщо ні, ви можете очистити цю localStorage). Вам доведеться зареєструвати слухача подій повідомлення наlocalStorage .
2. Користувач підтверджує / створює конфіденційну інформацію на цій вкладці (або будь-якій іншій вкладці, відкритій у вашому домені).
3. Ви оновлюєте файл, sessionStorageщоб зберігати конфіденційну інформацію, і використовуєте localStorageдля зберігання цієї інформації, а потім видаляєте її (вас не хвилює терміни тут, оскільки подія була в черзі при зміні даних). Будь-яка інша вкладка, відкрита в цей час, буде передзвонена в події повідомлення та оновить їхsessionStorage із конфіденційною інформацією.
4. Якщо користувач відкриє нову вкладку у вашому домені, вона sessionStorageбуде порожньою. Код повинен встановити ключ у localStorage(for example:) req. Будь-яка (усі) інша вкладка буде передзвонена в події повідомлення, перегляньте цей ключ і зможете відповісти на конфіденційну інформацію з їхньої sessionStorage(наприклад, у 3), якщо вона є.

Зауважте, що ця схема не залежить від window.onbeforeunloadкрихкої події (оскільки браузер може бути закритий / розбитий без цих подій). Крім того, часу на зберіганні чутливої ​​інформації localStorageдуже мало (оскільки ви покладаєтесь на виявлення змін трансиєнтів для події повідомлення з перехресними вкладками), тому навряд чи така конфіденційна інформація просочиться на жорсткому диску користувача.

Ось демонстрація цієї концепції: http://jsfiddle.net/oypdwxz7/2/

Немає такого способу виявити закриття браузера, тому, ймовірно, ви не можете видалити localStorage у закритому браузері, але є інший спосіб обробляти речі, якими ви можете скористатися sessionCookies, оскільки він зруйнується після закриття браузера. Це я реалізований у своєму проекті.

Ви можете просто використовувати sessionStorage. Оскільки sessionStorage дозволяють очистити все значення ключа, коли вікно браузера буде закрито.

Дивіться там: SessionStorage- MDN

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

delete localStorage.myPageDataArr;