当关闭浏览器或关闭javascript，角度和反应中的标签时如何删除本地存储答案

【问题标题】：how to remove local storage when the closing browser or closing tab in javascript, angular and react当关闭浏览器或关闭javascript，角度和反应中的标签时如何删除本地存储
【发布时间】：2021-12-21 22:09:33
【问题描述】：

当我关闭浏览器时如何删除本地存储或会话存储数据。打开多个标签页时，关闭浏览器网站的最后一个标签页时如何删除localstoge的详细信息？

【问题讨论】：

标签： javascript reactjs angular browser

【解决方案1】：

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

【讨论】：

【解决方案2】：

看到这个答案here

你可以使用

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

【讨论】：

【解决方案3】：

localStorage 有 5 种方法：

Storage.setItem():

Storage 接口的 setItem() 方法在传递一个键名和值时，会将该键添加到给定的 Storage 对象中，或者如果该键的值已经存在，则更新该键的值。

Storage.getItem():

Storage 接口的 getItem() 方法在传递一个键名时，将在给定的 Storage 对象中返回该键的值，如果该键不存在，则返回 null。

Storage.removeItem():

Storage 接口的 removeItem() 方法在传递一个键名时，将从给定的 Storage 对象中删除该键（如果存在）。 Web Storage API 的 Storage 接口提供对特定域的会话或本地存储的访问。

Storage.clear():

Storage 接口的 clear() 方法清除存储在给定 Storage 对象中的所有键。

Storage.key():

Storage 接口的 key() 方法，当传递一个数字 n 时，返回给定 Storage 对象中第 n 个键的名称。键的顺序是用户代理定义的，所以你不应该依赖它。

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

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

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 一起使用。这取决于您尝试对代码执行的操作。

【讨论】：