如何在瀏覽器關閉時清除 localStorage？

Question

當瀏覽器關閉時，我需要清除我的localStorage 。

1. 我需要標簽和 windows 之間的數據共享空間，它們具有共同的來源（協議、域、端口）。 例如，標簽組和 windows 與https://www.reddit.com打開。 所以sessionStorage不是一個選項。
2. 我需要在瀏覽器關閉時清除localStorage 。 事件beforeunload僅在選項卡關閉時起作用。 但是當整個瀏覽器關閉時，這個事件不會為每個打開的選項卡觸發。 所以存儲不會被清除。

所以我需要一些localStorage和sessionStorage的混合體。

Answer 1

您可以嘗試在打開瀏覽器而不是關閉瀏覽器時清除本地存儲的解決方案。 首先檢查session存儲是否有值，如果沒有清除本地存儲，然后為session存儲設置一個值。這樣可以避免將來進行頁面刷新時清除本地存儲。

const  clearStorage = () =>  {
    let session = sessionStorage.getItem('value');
    if (session == null) {
        localStorage.removeItem('remove');
    }
    sessionStorage.setItem('value', 1);
}
window.addEventListener('load', clearStorage);

Answer 2

關閉瀏覽器時不要清除本地存儲，因為很多原因，例如停電，用戶無法正確關閉瀏覽器……
所以作為一個解決方案，我建議：

1-手動：
您添加一個變量來檢查本地存儲是否有效或是否由過期的 updated_at 變量從其他會話中遺留下來

2- 使用 session 唯一標識符：
如果您使用的是 php 您應該能夠使用 session id 識別每個 session
因此，如果您有：

<script>
 var sessionId = "<?php echo session_id(); ?>" ;

 if( localStorage.getItem("session_id") === sessionId){// getter
 //stayed opened a tab/window in same session

 }else{ 

 // browser closed detected


 //register new session id
  localStorage.setItem("session_id", sessionId);// setter

 // here you can remove Old data or add new !


 }

</script>

每個瀏覽器都有一個唯一的ID session 完美解決了這個問題

3-使用cookie：
根據一些評論和這個答案
. 您可以使用 cookies 在以下情況下過期：瀏覽器關閉 / session 結束女巫......具有不可預測的缺點......

 document.cookie = "key=value; path=/";// do not specify a expiring date 
 // in order for this to get destroyed with session 

您可以在此處查看此解決方案的問題