当浏览器窗口/标签关闭时,如何删除localStorage项目?

12 浏览
0 Comments

当浏览器窗口/标签关闭时,如何删除localStorage项目?

我的情况:localStorage带有键+值,应在浏览器关闭时被删除,而不是单个标签页。\n请查看我的代码,看看它是否正确,还有什么可以改进的地方:\n

//如果不存在,则创建localStorage键+值
if (localStorage) {
  localStorage.myPageDataArr = {
    "name" => "Dan",
    "lastname" => "Bonny"
  };
}
//当浏览器关闭时-伪代码
$(window).unload(function() {
  localStorage.myPageDataArr = undefined;
});

0
0 Comments

localStorage 是 HTML5 提供的一种在浏览器端存储数据的方法,它可以在浏览器关闭后仍然保留数据。然而,有时候我们希望在浏览器窗口或选项卡关闭时自动删除 localStorage 中的某个项目。那么,如何在浏览器窗口/选项卡关闭时删除 localStorage 项目呢?

我们可以使用 window 全局关键字来实现:

window.localStorage.removeItem('keyName');

为什么要使用 window 对象?其实使用 localStorage.removeItem(key) 也可以实现相同的功能。

有人可能会问,为什么要使用 window 对象?可以参考这个链接:[stackoverflow.com/questions/5319878/…](http://stackoverflow.com/questions/5319878)

在使用这种方法时,有人提出了一个问题,即在 IE 11 中是否有效?请给出建议。我在 Angular 5 的代码中遇到了这个问题。

0
0 Comments

问题的原因是:localStorage在浏览器关闭时不会自动删除,而且sessionStorage在打开新标签页时不会存储。

解决方法是:使用sessionStorage替代localStorage,因为sessionStorage在浏览器关闭时会自动删除。但是需要注意的是,根据W3C编辑草案的描述,浏览上下文的生命周期可能与实际的用户代理进程的生命周期无关,因为用户代理可能支持在重启后恢复会话。

有些人希望有一个类似localStorage/sessionStorage的混合方案,即在浏览器关闭时自动删除,但在打开新标签页时可以存储。他们希望能够以一种只存在于内存中的方式存储敏感信息,并且不希望这些信息存储在任何硬盘上。

可以使用sessionStorage替代localStorage来解决在浏览器关闭时删除localStorage的问题。但是需要注意的是,sessionStorage在打开新标签页时不会存储数据。如果需要一种在浏览器关闭时自动删除的内存中存储方案,可能需要使用其他方法来实现。

0
0 Comments

当浏览器窗口/标签关闭时,如何删除localStorage项目?

为什么不能使用delete运算符?据我测试,delete localStorage.keylocalStorage.removeItem(key)的效果是一样的。对我来说,使用delete比使用localStorage.setItem('key', 1)在设置变量时更清晰。

如果它能够工作,你理论上可以使用它。但考虑到removeItem作为一个成员函数提供,使用它而不是使用单独的操作符可能更合理,以避免遇到潜在的未定义行为。

请记住,一个人总是可以(意外地)执行localStorage.removeItem = null;,这使得localStorage.removeItem(key);成为一个潜在的不良主意。

我不明白这为什么是一个合理的应急计划。一门语言允许人们做破坏性的事情并不意味着你应该采用非标准的方式来使用库来防止滥用语言。如果你或你的其他开发人员不理解调用和赋值之间的区别,那么你面临的问题比如何最好地从localStorage中删除项目要大得多。

这正是为什么首先写localStorage.key = 1是一个坏主意 - 为了避免这种意外发生。

$window.on('unload', function(){})在标签关闭时触发,所以如果我关闭我的页面的一个标签,它将删除localStorage,而该localStorage也被另一个标签使用。有没有办法解决这个问题?我知道有sessionStorage,但它只能在一个标签上使用(在Chrome和Firefox中)。

方法developer.mozilla.org/en-US/docs/Web/API/Storage/removeItem的文档。

0