如何删除本地存储时关闭浏览器或关闭标签在javascript,Angular 和React

ki1q1bka  于 2023-02-02  发布在  Java
关注(0)|答案(3)|浏览(137)

如何删除本地存储或会话存储数据,当我关闭浏览器。如何删除本地存储的详细信息时,关闭浏览器的网站的最后一个选项卡时,当多个选项卡打开?,我已经尝试了许多解决方案,但本地存储被清除,即使在刷新页面。

6ie5vjzr

6ie5vjzr1#

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

hujrc8aj

hujrc8aj2#

请参见此答案here
您可以使用

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

62lalag43#

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()方法。我会在注解中和代码一起解释哪种方法更适合你。
下面是可能对您有所帮助的代码解决方案:

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-您可能还需要考虑将sessionStoragelocalStorage一起使用。这取决于您尝试使用代码做什么。**

相关问题