如何在浏览器窗口/选项卡关闭时删除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

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

使用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

localStorage.removeItem(key);  //item

localStorage.clear(); //all items

Answer 9

有五种方法可供选择：

• setItem()：给localStorage添加key和value
• getItem()：从localStorage中通过key检索一个值
• removeItem()：从localStorage中通过键删除一个项目
• clear()：清除所有localStorage
• key()：传递一个数字来检索 localStorage 的第 n 个键

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

window.localStorage.clear();

Answer 10

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 11

这对于对象来说就可以了。

localStorage.removeItem('key');

或者

localStorage.setItem('key', 0 );  

Answer 12

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