我的案例:localStorage键+值,当浏览器关闭时应该删除,而不是单个选项卡。

请看看我的代码,如果它是正确的和什么可以改进:

//创建localStorage key + value if (localStorage) { localStorage。myPageDataArr = { "name" => "Dan", "lastname" => "Bonny" }; } //当浏览器关闭时- psedocode $(窗口).unload(函数(){ localStorage。myPageDataArr = undefined; });


当前回答

为什么不使用sessionStorage?

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

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

其他回答

试着用

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

希望这对你有用

在这个问题被提出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');

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

When starting from scratch, the session storage is assigned a random id in a key called tabid The local storage is then set with a key called tabs containing a object those key tabid is set to 1. When the tab is unloaded, the local storage's tabs is updated to an object containing tabid set to 0. If the tab is reloaded, it's first unloaded, and resumed. Since the session storage's key tabid exists, and so does the local storage tabs key with a sub-key of tabid the local storage is not cleared. When the browser is unloaded, all session storage will be cleared. When resuming the session storage tabid won't exists anymore and a new tabid will be generated. Since the local storage does not have a sub-key for this tabid, nor any other tabid (all session were closed), it's cleared. Upon a new created tab, a new tabid is generated in session storage, but since at least one tabs[tabid] exists, the local storage is not cleared

这将对对象起作用。

localStorage.removeItem('key');

Or

localStorage.setItem('key', 0 );  

There is a very specific use case in which any suggestion to use sessionStorage instead of localStorage does not really help. The use-case would be something as simple as having something stored while you have at least one tab opened, but invalidate it if you close the last tab remaining. If you need your values to be saved cross-tab and window, sessionStorage does not help you unless you complicate your life with listeners, like I have tried. In the meantime localStorage would be perfect for this, but it does the job 'too well', since your data will be waiting there even after a restart of the browser. I ended up using a custom code and logic that takes advantage of both.

I'd rather explain then give code. First store what you need to in localStorage, then also in localStorage create a counter that will contain the number of tabs that you have opened. This will be increased every time the page loads and decreased every time the page unloads. You can have your pick here of the events to use, I'd suggest 'load' and 'unload'. At the time you unload, you need to do the cleanup tasks that you'd like to when the counter reaches 0, meaning you're closing the last tab. Here comes the tricky part: I haven't found a reliable and generic way to tell the difference between a page reload or navigation inside the page and the closing of the tab. So If the data you store is not something that you can rebuild on load after checking that this is your first tab, then you cannot remove it at every refresh. Instead you need to store a flag in sessionStorage at every load before increasing the tab counter. Before storing this value, you can make a check to see if it already has a value and if it doesn't, this means you're loading into this session for the first time, meaning that you can do the cleanup at load if this value is not set and the counter is 0.

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