Vue-點擊注銷清除清除localStorage緩存 實現用戶注銷

Vue-點擊注銷清除清除localStorage緩存

最近在寫一個vue項目時需要用到注銷按鈕，判斷是否登錄的條件是瀏覽器保存了用戶token，點擊注銷清除localStorage緩存。實現用戶注銷

在localStorage中儲存數據，方便在頁面中使用數據的時候調用。如果用完數據之后需要清除localStorage中儲存的數據，可以使用以下幾種方式：

\(~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~\)

1. localStorage.clear() 可以清除localStorage中所有的key

   methods: {
        clear_data() {
             localStorage.clear();
        }
   }
   

   \(~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~\)

2. localStorage.removeItem() 通過以下方法來刪除對應key以及key中的內容

   methods: {
        clear_data() {
             window.localStorage.removeItem('key')
        }
   }
   

   \(~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~\)

3. localStorage.setItem() 可以清空儲存在localStorage中的key對應的value值，而保留key

   methods: {
        clear_data() {
             // 第一個參數為key的名，第二個參數為空
             localStorage.setItem("key", "")  
        }
   }
   

可以選擇這個localStorage.clear()進而實現清除狀態的效果 實現用戶注銷