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

使用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.";

在一个非常特定的用例中，使用sessionStorage代替localStorage的任何建议都没有真正的帮助。用例就像在打开至少一个选项卡时存储内容一样简单，但是如果关闭最后一个选项卡，该用例将无效。如果您需要跨表和窗口保存值，那么除非您像我尝试过的那样使监听程序复杂化，否则sessionStorage不会对您有所帮助。同时，localStorage对此非常适合，但是它做得“很好”，因为即使重新启动浏览器，您的数据也会在那里等待。我最终使用了可同时利用两者的自定义代码和逻辑。

我宁愿解释然后给出代码。首先将所需的内容存储在localStorage中，然后在localStorage中创建一个计数器，该计数器将包含您已打开的选项卡的数量。每次页面加载时都会增加，每次页面卸载时都会减少。您可以在此处选择要使用的事件，建议使用“加载”和“卸载”。卸载时，您需要执行计数器要为0时要执行的清理任务，这意味着您要关闭最后一个选项卡。棘手的部分到了：我还没有找到一种可靠的通用方法来判断页面内部页面重新加载或导航与选项卡关闭之间的区别。因此，如果您存储的数据不是您可以检查的第一个标签后可以在加载时重建的数据，那么您将无法在每次刷新时将其删除。相反，您需要在每次加载前将标志存储在sessionStorage中，然后再增加选项卡计数器。在存储此值之前，您可以检查它是否已经有一个值，如果没有，这意味着您是第一次加载到该会话中，这意味着您可以在加载时进行清理未设置值且计数器为0。

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

使用原始JavaScript，您可以执行以下操作：

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

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

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

如果要在浏览器关闭时删除密钥，则应改用sessionStorage。

尝试使用

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

希望这对你有用

应该这样，而不是使用delete运算符：

localStorage.removeItem(key);