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

问题描述 投票：333回答：15

我的案例：带有键+值的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;
});
javascript jquery html5 local-storage
15个回答
713
投票

应该这样做而不是删除操作符：

localStorage.removeItem(key);
3
投票

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

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..");
}

它按预期对我有效（我使用谷歌Chrome）。改编自：http://www.w3schools.com/html/html5_webstorage.asp。

3
投票

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

有关可触发window.onbeforeunload的事件列表的更多信息，请参阅此链接： -

http://msdn.microsoft.com/en-us/library/ms536907(VS.85).aspx

3
投票

为什么不使用sessionStorage？

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

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

3
投票

在询问问题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将更新为包含tabid设置为0的对象。
  4. 如果重新加载选项卡，则首先将其卸载并恢复。由于会话存储的密钥tabid存在，并且具有tabs子密钥的本地存储tabid密钥也不存在，因此本地存储不会被清除。
  5. 卸载浏览器后，将清除所有会话存储。当恢复会话存储时，tabid将不再存在，并且将生成新的tabid。由于本地存储没有这个tabid的子密钥，也没有任何其他tabid（所有会话都已关闭），它已被清除。
  6. 在新创建的选项卡上，会话存储中会生成新的tabid，但由于存在至少一个tabs [tabid]，因此不会清除本地存储
0
投票

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

如果您想存储身份验证或仅在浏览器关闭时被破坏的任何敏感信息，您可以依靠sessionStorage和localStorage进行交叉表消息传递。

基本上，这个想法是：

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

请注意，此方案不依赖于脆弱的window.onbeforeunload事件（因为浏览器可以在没有触发这些事件的情况下关闭/崩溃）。此外，敏感信息存储在localStorage上的时间非常短（因为您依赖于瞬态更改检测交叉表消息事件），因此这些敏感信息不太可能泄漏到用户的硬盘驱动器上。

这是这个概念的演示：http://jsfiddle.net/oypdwxz7/2/

-4
投票

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

delete localStorage.myPageDataArr;
98
投票

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

 window.localStorage.removeItem('keyName');
92
投票

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

使用vanilla JavaScript可以执行以下操作：

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

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

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

87
投票

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

18
投票

尝试使用

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

希望这对你有用

12
投票

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

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

9
投票

使用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.";
7
投票
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]);
}
4
投票

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

我遇到过同样的问题。我在angularjs应用程序中使用https://github.com/grevory/angular-local-storage模块。如果按如下方式配置应用程序，则会将变量保存在会话存储中而不是本地存储中。因此，如果您关闭浏览器或关闭选项卡，会话存储将自动删除。你不需要做任何事情。

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

希望它会有所帮助。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.