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

Question

我的案例：带有键+值的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;
});

Answer 1

应该像这样完成而不是删除操作符：

localStorage.removeItem(key);

Answer 2

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

 window.localStorage.removeItem('keyName');

Answer 3

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

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

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

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

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

Answer 4

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

Answer 5

尝试使用

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

希望这适合你

Answer 6

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

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

Answer 7

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

Answer 8

有五种方法可供选择：

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

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

window.localStorage.clear();

Answer 9

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]);
}

Answer 10

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

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

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

希望它会有所帮助。

Answer 11

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

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

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

Answer 12

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

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。

Answer 13

为什么不使用sessionStorage？

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

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

Answer 14

在问了这个问题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]存在，因此不会清除本地存储

Answer 15

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

看到那里：SessionStorage- MDN

Answer 16

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

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

此基本代码段将为您提供两全其美的体验。

仅在浏览器会话（如 之类的）持续存在的存储空间，而在选项卡（ localStorage ）之间也可共享的存储空间。

它完全是通过localStorage来完成的。

function cleanup(){
    // whatever cleanup logic you want
    window.localStorage.clear();
    window.sessionStorage.clear();
}

window.onbeforeunload = function () {
    let tabs = JSON.parse(window.localStorage.getItem('tabs'))
    if (tabs === 1) {
        // last tab closed, perform cleanup.
        cleanup();
    } else {
        window.localStorage.setItem('tabs', --tabs);
        window.dispatchEvent(new Event('storage'));
    }
}

window.onstorage = function () {
    console.log(JSON.parse(window.localStorage.getItem('tabs')));
};

window.onload = function () {
    let tabs = JSON.parse(window.localStorage.getItem('tabs'))
    if (tabs === null) {
        window.localStorage.setItem('tabs', 1);
    } else {
        window.localStorage.setItem('tabs', ++tabs);
    }
}

Answer 17

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

Answer 18

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

如果要存储身份验证或仅在关闭浏览器时破坏的任何敏感信息，则可以依靠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/

Answer 19

localStorage.removeItem(key);  //item

localStorage.clear(); //all items

Answer 20

class std::basic_string_view<char,struct std::char_traits<char> > __cdecl TypeName<void>::fullname_intern(void)

Answer 21

window.addEventListener('beforeunload', (event) => {

    localStorage.setItem("new_qus_id", $('.responseId').attr('id'));

    var new_qus_no = localStorage.getItem('new_qus_id');
    console.log(new_qus_no);

});

if (localStorage.getItem('new_qus_id') != '') {
    var question_id = localStorage.getItem('new_qus_id');
} else {
    var question_id = "<?php echo $question_id ; ?>";
}

Answer 22

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

delete localStorage.myPageDataArr;