My Case: 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]);
}
Хотя некоторые пользователи уже уже ответили на этот вопрос, я приводил пример настроек приложения для решения этой проблемы.
У меня была такая же проблема. Я использую 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). Адаптировано из: 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, за исключением того, что он хранит данные только для одного сеанса. Данные удаляются, когда пользователь закрывает окно браузера."
Посмотрев на этот вопрос через 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');
Изменить: Основная идея здесь заключается в следующем:
tabidtabs содержащим объект, для которого ключ tabid имеет значение 1.tabs локального хранилища обновляются до объекта, содержащего tabid установленный в 0.tabid ключа хранилища tabid, а также ключ tabs локального хранилища с tabid клавишей tabid локальное хранилище не очищается.tabid хранилища tabid больше не существует, и будет создан новый tabid. Так как в локальном хранилище нет tabid для этого tabid или любого другого tabid (все сеансы были закрыты), он очищен.tabid генерируются в памяти сессии, но так как по крайней мере один tabs [ tabid ] существует, локальное хранилище не очищаетсяЭто старый вопрос, но, похоже, ни один из приведенных выше ответов не идеален.
В случае, если вы хотите сохранить аутентификацию или любую конфиденциальную информацию, которая уничтожается только при закрытом браузере, вы можете положиться на sessionStorage и localStorage для передачи сообщений между вкладками.
По сути, идея заключается в следующем:
localStorage и sessionStorage пусты (если нет, вы можете очистить localStorage). Вам нужно зарегистрировать прослушиватель событий сообщения в localStorage.sessionStorage для хранения конфиденциальной информации и используете localStorage для хранения этой информации, а затем удаляете ее (здесь вам не нужно время, так как событие было поставлено в очередь при изменении данных). Любая другая вкладка, открытая в то время, будет sessionStorage по событию сообщения и обновит свой sessionStorage с конфиденциальной информацией.sessionStorage будет пустым. Код должен будет установить ключ в localStorage (например: req). Любая (все) другая вкладка будет вызвана обратно в событии сообщения, увидит этот ключ и может ответить секретной информацией из их sessionStorage (как в 3), если они есть. Обратите внимание, что эта схема не зависит от события window.onbeforeunload которое является хрупким (поскольку браузер может быть закрыт/аварийно завершен без запуска этих событий). Кроме того, время хранения конфиденциальной информации в localStorage очень мало (поскольку вы полагаетесь на обнаружение изменения localStorage для события сообщения перекрестной табуляции), поэтому маловероятно, что такая конфиденциальная информация попадет на жесткий диск пользователя.
Вот демонстрация этой концепции: http://jsfiddle.net/oypdwxz7/2/
Нет такого способа определения закрытия браузера, поэтому, вероятно, вы не можете удалить localStorage при закрытии браузера, но есть другой способ обработки вещей, которые вы можете использовать с помощью sessionCookies, так как он уничтожит после закрытия браузера. Это я реализовал в своем проекте.
Вы можете попробовать следующий код для удаления локального хранилища:
delete localStorage.myPageDataArr;
Это будет работать как шарм, если вы используете AngularJS
$localStorage.$reset();