当浏览器窗口/选项卡关闭时，如何删除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;
});

752632 次浏览
小开

试着用

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

希望这对你有用

小开

您可以尝试以下代码删除本地存储:

delete localStorage.myPageDataArr;
小开
最佳答案

应该这样做，而不是使用delete操作符:

localStorage.removeItem(key);
小开

你可以在JavaScript中使用beforeunload事件。

使用JavaScript，你可以这样做:

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

这将在浏览器窗口/选项卡关闭之前删除键，并提示您确认关闭窗口/选项卡操作。我希望这能解决你的问题。

注意:onbeforeunload方法应该返回一个字符串。

小开

下面是一个简单的测试，看看你在使用本地存储时是否有浏览器支持:

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..");
}
它为我工作，正如预期的那样(我使用谷歌Chrome)。 改编自:http://www.w3schools.com/html/html5_webstorage.asp.

小开

我不认为这里提出的解决方案是100%正确的，因为窗口。onbeforeunload事件不仅在浏览器/选项卡关闭时被调用(这是必需的)，而且在所有其他几个事件上也被调用。(可能不需要)

有关可以触发window.onbeforeunload的事件列表的更多信息，请参阅此链接

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

小开

如果您希望在浏览器关闭时删除键，则应该使用sessionStorage。

小开
在一个非常具体的用例中，任何使用sessionStorage而不是localStorage的建议都没有真正的帮助。 用例非常简单，比如在至少打开一个选项卡时存储一些内容，但如果关闭剩下的最后一个选项卡，则使其无效。 如果您需要跨选项卡和窗口保存您的值，sessionStorage不能帮助您，除非您使用侦听器使您的生活复杂化，就像我所尝试的那样。 与此同时，localStorage将是完美的，但它的工作“太好了”，因为你的数据将等待在那里，即使重新启动浏览器。 我最终使用了一个自定义代码和逻辑，利用两者 我宁愿解释，而不是给出代码。首先在localStorage中存储您需要的内容，然后在localStorage中创建一个计数器，该计数器将包含您已打开的选项卡的数量。 这将在每次页面加载时增加，在每次页面卸载时减少。你可以在这里选择要使用的事件，我建议使用'load'和'unload'。 在卸载时，您需要在计数器达到0时执行您想要执行的清理任务，这意味着您正在关闭最后一个选项卡。 棘手的部分来了:我还没有找到一种可靠而通用的方法来区分页面重载或页面内导航和选项卡关闭之间的区别。 因此，如果您存储的数据不是在检查这是您的第一个选项卡后可以在加载时重新构建的，那么您不能在每次刷新时删除它。 相反，您需要在每次加载时在sessionStorage中存储一个标志，然后再增加制表符计数器。 在存储这个值之前，你可以检查它是否已经有一个值，如果没有， 这意味着您将第一次加载到此会话中，这意味着如果未设置此值且计数器为0，则可以在加载时执行清理
小开

为什么不使用sessionStorage?

sessionStorage对象等同于localStorage对象，只是它只存储一个会话的数据。当用户关闭浏览器窗口时，数据将被删除。”

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

小开

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.";
小开

与window全局关键字一起使用:-

 window.localStorage.removeItem('keyName');
小开

虽然有些用户已经回答了这个问题，但我将给出一个应用程序设置示例来解决这个问题。

我也有同样的问题。我在我的angularjs应用程序中使用https://github.com/grevory/angular-local-storage模块。如果你这样配置你的应用程序，它会把变量保存在会话存储中，而不是本地存储。因此，如果您关闭浏览器或关闭选项卡，会话存储将自动删除。你什么都不需要做。

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

在这个问题被提出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的键中被分配一个随机id
  2. 然后用一个名为tabs的键设置本地存储，该键包含一个对象，该对象的tabid被设置为1。
  3. 当标签被卸载时，本地存储的tabs被更新为一个包含tabid设为0的对象。
  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中设置一个键(例如:req)。任何(所有)其他选项卡将在消息事件中被回调，看到该键，并可以回答来自他们的sessionStorage的敏感信息(如3)，如果他们有这样的信息。

请注意，此方案不依赖于脆弱的window.onbeforeunload事件(因为浏览器可以在不触发这些事件的情况下关闭/崩溃)。此外，敏感信息存储在localStorage上的时间非常短(因为您依赖于跨标签消息事件的瞬变检测)，因此此类敏感信息不太可能泄漏到用户的硬盘驱动器上。

下面是这个概念的演示:http://jsfiddle.net/oypdwxz7/2/

小开

没有这样的方法来检测浏览器关闭，所以可能你不能在浏览器关闭时删除localStorage，但有另一种方法来处理你可以使用sessionCookies，因为它会在浏览器关闭后销毁。这是我在我的项目中实现的。

小开 
localStorage.removeItem(key);  //item


localStorage.clear(); //all items
小开

您可以简单地使用sessionStorage。因为sessionStorage允许在浏览器窗口关闭时清除所有键值。

看这里:SessionStorage——MDN

小开

有五种方法可供选择:

  • setItem():将键和值添加到localStorage
  • getItem():通过键从localStorage检索值
  • removeItem():按键从localStorage中删除一个项
  • clear():清除所有localStorage
  • key():传递一个数字来检索localStorage的第n个键

您可以使用clear()，该方法在调用时清除该域的所有记录的整个存储。它不接收任何参数。

window.localStorage.clear();
小开

8.5年过去了，最初的问题一直没有得到答案。

当浏览器关闭时，没有一个标签。

这个基本代码片段将为您提供两全其美的服务。仅在浏览器会话期间存在的存储(像sessionStorage)，但也可以在选项卡之间共享(localStorage)。

它完全通过localStorage来实现这一点。

function cleanup(){
// place whatever cleanup logic you want here, for example:
// window.localStorage.removeItem('my-item')
}


function tabOpened(){
const tabs = JSON.parse(window.localStorage.getItem('tabs'))
if (tabs === null) {
window.localStorage.setItem('tabs', 1)
} else {
window.localStorage.setItem('tabs', ++tabs)
}
}


function tabClosed(){
const tabs = JSON.parse(window.localStorage.getItem('tabs'))
if (tabs === 1) {
// last tab closed, perform cleanup.
window.localStorage.removeItem('tabs')
cleanup()
} else {
window.localStorage.setItem('tabs', --tabs)
}
}


window.onload = function () {
tabOpened();
}


window.onbeforeunload = function () {
tabClosed();
}
小开 
    if(localStorage.getItem("visit") === null) {
localStorage.setItem('visit', window.location.hostname);
console.log(localStorage.getItem('visit'));
}
else if(localStorage.getItem('visit') == 'localhost'){
console.log(localStorage.getItem('visit'));
}
else {
console.log(localStorage.getItem('visit'));
}
$(document).ready(function(){
$("#clickme").click(function(){
localStorage.setItem('visit', '0');
});
});
window.localStorage.removeItem('visit');
小开 
window.addEventListener('beforeunload', (event) => {


localStorage.setItem("new_qus_id", $('.responseId').attr('id'));


var new_qus_no = localStorage.getItem('new_qus_id');
console.log(new_qus_no);


});


if (localStorage.getItem('new_qus_id') != '') {
var question_id = localStorage.getItem('new_qus_id');
} else {
var question_id = "<?php echo $question_id ; ?>";
}
小开

这将对对象起作用。

localStorage.removeItem('key');

或

localStorage.setItem('key', 0 );

提交答案