如何在关闭特定选项卡时清除本地存储，而不是在Angular 2中关闭浏览器时清除？

Question

我的要求是：

1. 我必须在浏览器关闭时清除localstorage。
2. 我已尝试使用 onbeforeunload 。它正在浏览器关闭事件上执行。
3. 由于打开了多个浏览器标签，因此localStorage会保留旧值，而不会将其重定向到“登录”页面。

以下是我的示例代码。

请为此提出任何解决方案。

@HostListener('window:onbeforeunload', ['$event'])
unloadHandler(event) {
    localStorage.clear();
}

Also, attached the code screenshot

Answer 1

您可以改用sessionStorage。与localStorage不同，它不会跨选项卡保留数据。 Here is some more information about it

会话存储与本地存储的工作方式相同，但唯一的区别是它会在当前选项卡关闭时清除数据。如果您为此应用程序打开一个新选项卡，它将重定向到登录。

您应该阅读以下文章，它将帮助您清楚地了解浏览器中可用的不同存储选项。 Sharing sessionStorage between tabs...

Answer 2

以下技巧可以锻炼以区分Refresh和Tab /浏览器关闭。在这里，我将在卸载之前将请求的时间戳与afterload进行比较。在下面的示例中，如果以秒为单位的timediff小于10秒，浏览器会将其视为刷新，如果时间差异大于10秒，则会将其视为制表符关闭。

您可以根据客户端的http请求时间间隔重新定义差异。如果它更多，只需将它增加到50秒。如果超过该值，则在加载时，浏览器将清除本地存储并重新加载站点。

 Property 'HTMLContentEditable' does not exist on type '(options?: any, callback?: any) => any'.
Property 'HTMLContentEditable' does not exist on type '(options?: any, callback?: any) => any'. 

**特别是对于角度2，请在<script> window.onbeforeunload = function(e) { let date = Date.now(); localStorage.setItem("lastactivity", date); }; window.onload = function() { let date1 = localStorage.getItem('lastactivity'); let date2 = Date.now(); if (date1 !== undefined) { let difference = date2 - date1; let diff = ((difference) / 1000).toFixed(0); if (diff > 10) { localStorage.clear(); //localStorage.removeItem(key); for removing a single item location.reload(); } } }; </script> 标记之前在index.html中添加这段代码。