在选项卡/窗口上保持/清理本地存储/会话的最佳方法关闭答案

【问题标题】：Best approach to keep/clean localStorage/session on tab/window closed在选项卡/窗口上保持/清理本地存储/会话的最佳方法关闭
【发布时间】：2018-01-25 06:04:00
【问题描述】：

我发现了很多关于在关闭选项卡或窗口时如何执行脚本或警报的问答。但是，假设您进行了身份验证并且希望将 JWT 保存在 localStorage (LS) 中。只要你的令牌还活着，你就会从 LS 中取回它。

我想在关闭选项卡或窗口时明确删除我的令牌（Ctrl + W 或 Ctrl + F4 或 Alt + F4)

我想出了在我的页面的 beforeunload 上定义一个脚本的想法，如下所示：

<script>
$(window).on('beforeunload', function(event){
   window.localStorage.removeItem("myID");
});
</script>

但后来我意识到在刷新时 F5 onbeforeunload 将执行，我将清除 LS。

然后我想出了这个解决方案

<script>
var clearLocalStorage = true;
$(window).on('keydown', function(event){
   if(event.keyCode == 116 ||  //F5
        (k == 16 && k == 17 && k == 82) ||  //Shift + Ctrl + R
        (k == 17 && k == 82)){  //Ctrl + R
      clearLocalStorage = false;
      event.preventDefault();
   }
});

$(window).on('beforeunload', function(event){
   if(clearLocalStorage){
      window.localStorage.removeItem("myID");
   }
});
</script>

这适用于 F5 因为它不会清除我的 LS，但如果我执行 Ctrl + R，它将丢失我的来自 LS 的令牌。

登录后，我想将我的令牌保留在 LS 上......

在以任何方式刷新时，即使您进一步执行 Ctrl + R 或 Shift，它也应该始终保留来自 LS 的令牌+ Ctrl +R
点击浏览器的URL地址，按回车重新加载页面。
仅在用户关闭选项卡或窗口时清除。如果您重新打开选项卡，您将需要再次进入登录页面。

我已经想在关闭 onClose 事件的窗口时控制 LS，如下所示，但它不起作用，因为我在开发人员工具的控制台上查询 LS 我可以看到令牌仍在在那里。

<script>
   window.onClose = function(){
      window.localStorage.removeItem("myID");
   }
</script>

我想知道在使用 jquery、jwt、html only 和 angularjs 1.5 刷新和/或关闭选项卡或窗口时管理 LS 和令牌会话的最佳方法是什么？

提前致谢。

【问题讨论】：

标签： jquery html angularjs local-storage token

【解决方案1】：

尝试定时事件：

var clearLocalStorage = true;
$(window).on('keydown', function(event){
   if(event.keyCode == 116 ||  //F5
        (k == 16 && k == 17 && k == 82) ||  //Shift + Ctrl + R
        (k == 17 && k == 82)){  //Ctrl + R
      clearLocalStorage = false;
      event.preventDefault();
   }
});

$(window).on('beforeunload', function(event){
  setTimeout(function(){
    if(clearLocalStorage)
       window.localStorage.removeItem("myID");
    else
      window.localStorage.persistItem("myID"); // make a persistent item in case
    }, 10); // I don't recommend anything above 100ms
});

【讨论】：