如何在浏览器窗口/选项卡关闭时删除 localStorage 项目?

IT技术 javascript jquery html local-storage
2021-02-10 18:21:34

我的案例:带有键 + 值的 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;
});
6个回答

应该这样做,而不是使用删除运算符:

localStorage.removeItem(key);
@skeggse 这正是为什么一开始写是个坏主意的原因localStorage.key = 1- 避免这种事故
2021-03-20 18:21:34
@kungphu 请记住,一个人总是可以(偶然地)这样做localStorage.removeItem = null;,这localStorage.removeItem(key);可能一个糟糕的主意。
2021-03-22 18:21:34
如果它有效,您可以在技术上使用它。但是考虑到 removeItem 作为成员函数提供,使用它而不是使用单独的运算符遇到潜在的未定义行为似乎是合乎逻辑的。
2021-03-23 18:21:34
我不明白这是一个合理的应急计划。语言允许人们做破坏性的事情这一事实并不意味着您应该采用非标准的方式使用库来防止语言被滥用。如果您或您的开发伙伴不了解调用和赋值之间的区别,那么您将面临比如何最好地从 localStorage 中删除项目更大的问题。
2021-04-05 18:21:34
为什么我们不能使用删除操作符呢?从我的测试来看,它似乎delete localStorage.keylocalStorage.removeItem(key). 当我将变量设置为 likelocalStorage.key = 1而不是localStorage.setItem('key', 1).
2021-04-11 18:21:34

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

 window.localStorage.removeItem('keyName');
为什么要使用 window 对象?只是localStorage.removeItem(key)工作正常。
2021-03-12 18:21:34
这个解决方案真的适用于 IE 11 吗?请建议。我在 angular 5 代码中遇到了这个问题。
2021-03-20 18:21:34
2021-03-25 18:21:34

如果您希望在浏览器关闭时删除密钥,则应改用 sessionStorage。

这是最好的答案;sessionStorage是针对提问者所描述的内容的补救措施。
2021-03-17 18:21:34
+1 提及sessionStorage,但W3C 编辑草案说:“浏览上下文的生命周期可能与实际用户代理进程本身的生命周期无关,因为用户代理可能支持在重启后恢复会话。”
2021-03-18 18:21:34
@EdwinStoteler 我也是。当他们以这种方式设计时,我有点困惑他们的想法。我真的需要访问一个只在内存中的浏览器存储,当浏览器关闭时它会被破坏。我想以一种可以跨整个域访问的方式存储敏感信息,但我不希望该信息进入任何硬盘。
2021-03-25 18:21:34
'sessionStorage' 的问题是当您打开一个新选项卡时它不会被存储,例如使用 ctrl 单击一个链接。我需要一个 localStorage/sessionStorage 混合,哈哈。
2021-04-06 18:21:34

您可以beforeunload在 JavaScript 中使用该事件。

使用 vanilla JavaScript,您可以执行以下操作:

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

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

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

那为什么不使用 sessionStorage 呢?
2021-03-21 18:21:34
这确实很有用。接受答案可能会很好(即使过了这么久)。
2021-03-22 18:21:34
一个问题是,即使您在同一页面上导航,也会调用它,而不仅仅是在选项卡关闭时调用,这可能不是预期的。旁注:从 onbeforeunload 返回 undefined 将禁用卸载时显示的消息。
2021-03-26 18:21:34
如果用户想停留在页面上而您已经删除了本地存储,会发生什么?该解决方案也不适用于 Chrome 和 IE11
2021-04-02 18:21:34
@dhsto VanillaJS 是纯 JavaScript :) 看这里:什么是 VanillaJS?.
2021-04-11 18:21:34

尝试使用

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

希望这对你有用

这将清理整个本地存储。糟糕的解决方案!
2021-03-17 18:21:34