首页 文章

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

提问于
浏览 次
306

我的案例：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 回答

  • 0

    尝试使用

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

    希望这对你有用

    回复于
  • 3

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

    localStorage.removeItem(key);
    回复于
  • 3

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

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

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

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

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

    回复于
  • 8

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

    window.localStorage.removeItem('keyName');
    回复于
  • 3

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

    回复于
  • 88

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

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

    回复于
  • 11

    使用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.";
    回复于
  • 75

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

    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 .

    回复于
  • -3

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

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

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

    回复于
  • 2

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

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

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

    希望它会有所帮助 .

    回复于
  • 85

    为什么不使用sessionStorage？

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

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

    回复于
  • 2
    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

    在询问问题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');
    回复于
  • 639

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

    delete localStorage.myPageDataArr;
    回复于
  • 16

    这将如果你正在使用AngularJS，那就像魅力一样

    $localStorage.$reset();
    回复于

相关问题