如何在浏览器窗口/选项卡关闭时删除本地存储项目

应该这样做，而不是使用删除运算符：

localStorage.removeItem(key);

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

与window全局关键字一起使用：-

 window.localStorage.removeItem('keyName');

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

使用香草JavaScript，您可以执行以下操作：

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

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

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

localStorage.removeItem(key);  //item
localStorage.clear(); //all items

有一个非常具体的用例，任何使用sessionStorage而不是localStorage的建议都没有真正的帮助。用例可以很简单，比如在打开至少一个选项卡时存储一些内容，但如果关闭剩余的最后一个选项卡，则会使其无效。如果您需要跨选项卡和窗口保存您的价值观，sessionStorage对您没有帮助，除非您像我尝试过的那样，让听众的生活变得复杂。同时，localStorage非常适合这一点，但它做得"太好了"，因为即使在重新启动浏览器后，您的数据也会在那里等待。我最终使用了一个自定义代码和逻辑，这两种功能都得到了利用。

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

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

尝试使用

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

希望这对你有效

有五种方法可供选择：

• setItem（）：将键和值添加到localStorage
• getItem（）：通过localStorage中的键检索值
• removeItem（）：从localStorage中按键删除项
• clear（）：清除所有本地存储
• key（）：传递一个数字以检索localStorage的第n个键

您可以使用clear（），此方法在调用时会清除该域的所有记录的整个存储。它不接收任何参数。

window.localStorage.clear();

for (let i = 0; i < localStorage.length; i++) {
    if (localStorage.key(i).indexOf('the-name-to-delete') > -1) {
        arr.push(localStorage.key(i));
    }
}
for (let i = 0; i < arr.length; i++) {
    localStorage.removeItem(arr[i]);
}

8.5年后，最初的问题从未得到真正的回答。

当浏览器关闭而不是单个选项卡时。

这个基本的代码片段将使您两全其美。仅与浏览器会话一样长的存储（类似于sessionStorage），但也可在选项卡之间共享（localStorage

它完全通过localStorage来实现这一点。

function cleanup(){
    // place whatever cleanup logic you want here, for example:
    // window.localStorage.removeItem('my-item')
}
function tabOpened(){
    const tabs = JSON.parse(window.localStorage.getItem('tabs'))
    if (tabs === null) {
        window.localStorage.setItem('tabs', 1)
    } else {
        window.localStorage.setItem('tabs', ++tabs)
    }
}
function tabClosed(){
    const tabs = JSON.parse(window.localStorage.getItem('tabs'))
    if (tabs === 1) {
        // last tab closed, perform cleanup.
        window.localStorage.removeItem('tabs')
        cleanup()
    } else {
        window.localStorage.setItem('tabs', --tabs)
    }
}
window.onload = function () {
    tabOpened();
}
window.onbeforeunload = function () {
    tabClosed();
}

为什么不使用sessionStorage？

sessionStorage对象等于localStorage对象，只是它只存储一个会话的数据。当用户关闭浏览器窗口时，数据会被删除。

http://www.w3schools.com/html/html5_webstorage.asp

虽然有些用户已经回答了这个问题，但我将举一个应用程序设置的例子来解决这个问题。

我也有同样的问题。我正在使用https://github.com/grevory/angular-local-storageangularjs应用程序中的模块。如果按以下方式配置应用程序，它将把变量保存在会话存储中，而不是本地存储中。因此，如果关闭浏览器或选项卡，会话存储将自动删除。你什么都不需要做。

app.config(function (localStorageServiceProvider) {
  localStorageServiceProvider
  .setPrefix('myApp')
  .setStorageType('sessionStorage')
});

希望它能有所帮助。

这将对对象起作用。

localStorage.removeItem('key');

或

localStorage.setItem('key', 0 );  

这里有一个简单的测试，看看您在使用本地存储时是否支持浏览器：

if(typeof(Storage)!=="undefined") {
  console.log("localStorage and sessionStorage support!");
  console.log("About to save:");
  console.log(localStorage);
  localStorage["somekey"] = 'hello';
  console.log("Key saved:");
  console.log(localStorage);
  localStorage.removeItem("somekey");  //<--- key deleted here
  console.log("key deleted:");
  console.log(localStorage);
  console.log("DONE ===");
} else {
  console.log("Sorry! No web storage support..");
}

它对我起到了预期的作用（我使用谷歌浏览器）。改编自：http://www.w3schools.com/html/html5_webstorage.asp.

我认为这里提供的解决方案不是100%正确的，因为window.onbeforeunload事件不仅在浏览器/Tab关闭时（这是必需的）被调用，而且在所有其他几个事件上也被调用。（可能不需要）

有关可以触发窗口的事件列表的更多信息，请参阅此链接。onbeforeunload:-

http://msdn.microsoft.com/en-us/library/ms536907（VS.85）.aspx

在这个问题被问了6年后，我发现这个问题仍然没有足够的答案；它应该实现以下所有功能：

• 关闭浏览器（或域的所有选项卡）后清除本地存储
• 如果至少有一个选项卡保持活动状态，则跨选项卡保留本地存储
• 重新加载单个选项卡时保留本地存储

在每个页面加载开始时执行这段javascript，以实现上述目标：

((nm,tm) => {
    const
            l = localStorage,
            s = sessionStorage,
            tabid = s.getItem(tm) || (newid => s.setItem(tm, newid) || newid)((Math.random() * 1e8).toFixed()),
            update = set => {
                let cur = JSON.parse(l.getItem(nm) || '{}');
                if (set && typeof cur[tabid] == 'undefined' && !Object.values(cur).reduce((a, b) => a + b, 0)) {
                    l.clear();
                    cur = {};
                }
                cur[tabid] = set;
                l.setItem(nm, JSON.stringify(cur));
            };
    update(1);
    window.onbeforeunload = () => update(0);
})('tabs','tabid');

编辑：这里的基本思想如下：

1. 当从头开始时，会话存储器在一个名为tabid的密钥中被分配了一个随机id
2. 然后用一个称为tabs的密钥设置本地存储器，该密钥包含那些密钥tabid被设置为1的对象
3. 卸载选项卡后，本地存储的tabs将更新为包含设置为0的tabid的对象
4. 如果重新加载了选项卡，则会先卸载该选项卡，然后再继续。由于会话存储器的密钥tabid存在，并且具有子密钥tabid的本地存储器tabs密钥也存在，所以本地存储器不被清除
5. 卸载浏览器后，所有会话存储都将被清除。当恢复会话时，存储tabid将不再存在，并且将生成新的tabid。由于本地存储器既没有此tabid的子密钥，也没有任何其他tabid的子密钥（所有会话都已关闭），因此它被清除
6. 在新创建的选项卡上，在会话存储中生成新的tabid，但由于至少存在一个tabs[tabid]，因此不会清除本地存储

您可以简单地使用sessionStorage。因为sessionStorage允许在浏览器窗口关闭时清除所有键值。

请参阅：SessionStorage-MDN

这是一个老问题，但上面的答案似乎都不完美。

如果您希望存储仅在浏览器关闭时销毁的身份验证或任何敏感信息，则可以使用sessionStorage和localStorage进行跨选项卡消息传递。

基本上，这个想法是：

1. 您没有从以前打开的选项卡引导，因此localStorage和sessionStorage都是空的（如果不是，您可以清除localStorage）。您必须在localStorage上注册一个消息事件侦听器
2. 用户在此选项卡（或在域上打开的任何其他选项卡）上验证/创建敏感信息
3. 您更新sessionStorage来存储敏感信息，并使用localStorage来存储此信息，然后删除它（您不在乎这里的时间，因为数据更改时事件已排队）。此时打开的任何其他选项卡都将在消息事件中被调用，并将使用敏感信息更新其sessionStorage
4. 如果用户在您的域上打开一个新选项卡，其sessionStorage将为空。代码必须在localStorage中设置一个密钥（例如：req）。任何（所有）其他选项卡都将在消息事件中被调用，查看该键，并可以使用来自其sessionStorage的敏感信息进行回答（如3中所示），如果他们有这样的信息的话

请注意，此方案不依赖于脆弱的window.onbeforeunload事件（因为浏览器可以在不触发这些事件的情况下关闭/崩溃）。此外，敏感信息存储在localStorage上的时间非常短（因为跨标签消息事件依赖于transients更改检测），因此此类敏感信息不太可能在用户的硬盘上泄露。

以下是此概念的演示：http://jsfiddle.net/oypdwxz7/2/

没有这样的方法来检测浏览器关闭，所以你可能无法在浏览器关闭时删除localStorage，但还有另一种方法可以处理你可以使用sessionCookies的东西，因为它会在浏览器关闭后销毁。这是我在我的项目中实现的。

    if(localStorage.getItem("visit") === null) {
      localStorage.setItem('visit', window.location.hostname);
      console.log(localStorage.getItem('visit'));
    } 
      else if(localStorage.getItem('visit') == 'localhost'){
            console.log(localStorage.getItem('visit'));
      }
    else {
     console.log(localStorage.getItem('visit'));
    }
   $(document).ready(function(){
      $("#clickme").click(function(){
         localStorage.setItem('visit', '0');
      });
   });  
   window.localStorage.removeItem('visit');

您可以尝试以下代码来删除本地存储：

delete localStorage.myPageDataArr;