如何在 javascript、angular 中关闭浏览器或关闭选项卡时删除本地存储并做出反应

Question

如何在关闭浏览器时删除本地存储或会话存储数据。如何在打开多个选项卡时关闭浏览器网站的最后一个选项卡时删除localstoge的详细信息？

Answer 1

要从浏览器中删除本地存储，您需要绑定名为 'beforeunload' 的事件，此事件将通过关闭选项卡并终止浏览器来触发。您可以找到有关该活动的更多信息 HERE

Answer 2

查看此回答here

您可以使用

window.addEventListener("beforeunload", function(e){
   // clean localStorage here
}, false);

Answer 3

你有 5 个 localStorage 方法：

Storage.setItem():

The setItem() method of the Storage interface, when passed a key name and value, will add that key to the given Storage object, or update that key's value if it already exists.

Storage.getItem():

The getItem() method of the Storage interface, when passed a key name, will return that key's value, or null if the key does not exist, in the given Storage object.

Storage.removeItem():

The removeItem() method of the Storage interface, when passed a key name, will remove that key from the given Storage object if it exists. The Storage interface of the Web Storage API provides access to a particular domain's session or local storage.

Storage.clear():

The clear() method of the Storage interface clears all keys stored in a given Storage object.

Storage.key():

The key() method of the Storage interface, when passed a number n, returns the name of the nth key in a given Storage object. The order of keys is user-agent defined, so you should not rely on it.

我认为最适合您的解决方案是使用：Storage.clear() 或 Storage.removeItem() 方法。我将在评论中与代码一起解释哪种方法更适合您。

以下是可能对您有所帮助的代码解决方案：

function cleanStorage() {
    // Place any cleanup logic you want here:
    // window.localStorage.removeItem('your-selected-item-1')
    // window.localStorage.removeItem('your-selected-item-2')
    // ...
    // This would delete only selected key or multiple keys 
    // with data inside. For example window.localStorage.removeItem('openedTabs') 
    // would remove oponedTabs count from functions below.

    // METHOD YOU PROBABLY WANT TO USE:
    localStorage.clear();

    // as mentioned above: 
    // The clear() method of the Storage interface clears 
    // all keys stored in a given Storage object.
}

// Use JSON.parse to count opened tabs
function openedTab() {
    const openedTabs = JSON.parse(window.localStorage.getItem('openedTabs'))
    if (openedTabs=== null) {
        window.localStorage.setItem('openedTabs', 1)
    } else {
        window.localStorage.setItem('openedTabs', ++openedTabs)
    }
}

// Use JSON.parse to count closed tabs
function closedTab() {
    const tabs = JSON.parse(window.localStorage.getItem('openedTabs'))
    if (openedTabs === 1) {
        // detects that the last tab and fires cleanStorage() function
        window.localStorage.removeItem('openedTabs')
        cleanStorage()
    } else {
        window.localStorage.setItem('openedTabs', --openedTabs)
    }
}

// start collecting opened tabs count to the same localStorage as a key you 
// will be clearing later.
window.onload = function() {
    openedTab();
}

// when user is about to close tab invoke function that will count closing tabs
window.onbeforeunload = function() {
    closedTab();
}

P.S - 您可能还想考虑将 sessionStorage 与 localStorage 一起使用。这取决于您要对代码执行的操作。

如何在 javascript、angular 中关闭浏览器或关闭选项卡时删除本地存储并做出反应

how to remove local storage when the closing browser or closing tab in javascript, angular and react

javascript

browser

reactjs

angular