存在問題：
如果在退出頁面時，沒有點擊“退出”按鈕，而是直接關閉頁面，token并沒有被清除，依然能通過訪問http://localhost:8080/#/ 直接進入主頁。
原因：
使用了localStorage而非sessionStorage或Cookie

一、基本概念

1. Cookie（HTML4的本地存儲 cookie）

Cookie非常小，大小在4KB左右。主要用途是保存登錄信息，比如登錄一個網站市場，是可以看到“記住密碼”，這通常就是通過在Cookie中存入一段辨識用戶身份的數據來實現的。

Cookie機制：
（1）如果不在瀏覽器中設置過期時間，cookie被保存在內存中，生命周期隨著關閉而結束，這種cookie簡稱cookie會話。
（2）如果在瀏覽器中設置了cookie的過期時間，cookie被保存在硬盤中，關閉瀏覽器后，cookie數據依然存在，直到過期時間結束才消失。

缺點：
（1）大小受限
（2）用戶可以操作（禁用）cookie，使功能受限
（3）安全性較低
（4）有些狀態不可能保存在客戶端。
（5）每次訪問都要傳送cookie給服務器，浪費帶寬。
（6）cookie數據有路徑（path）的概念，可以限制cookie只屬于某個路徑下。

HTML5中與本地存儲相關的兩個重要內容：Web Storage與本地數據庫。其中，Web Storage存儲機制是對HTML4中cookie存儲機制的一個改善。由于cookie存儲機制有很多缺點，HTML5不再使用它，轉而使用改良后的Web Storage存儲機制。本地數據庫是HTML5中新增的一個功能，使用它可以在客戶端本地建立一個數據庫，原本必須保存在服務器端數據庫中的內容現在可以直接保存在客戶端本地了，這大大減輕了服務器端的負擔，同時也加快了訪問數據的速度。

2. LocalStorage（ HTML5的本地存儲）

將數據保存在客戶端本地的硬件設備(通常指硬盤，也可以是其他硬件設備)中，即使瀏覽器被關閉了，該數據仍然存在，下次打開瀏覽器訪問網站時仍然可以繼續使用。

3.SessionStorage（ HTML5的本地存儲）

將數據保存在session對象中。所謂session，是指用戶在瀏覽某個網站時，從進入網站到瀏覽器關閉所經過的這段時間，也就是用戶瀏覽這個網站所花費的時間。session對象可以用來保存在這段時間內所要求保存的任何數據。

這兩者的區別在于，sessionStorage為臨時保存，而localStorage為永久保存。

localStorage與sessionStorage對比
1、生命周期：
localStorage的生命周期是永久的，關閉頁面或瀏覽器之后localStorage中的數據也不會消失。localStorage除非主動刪除數據，否則數據永遠不會消失。
sessionStorage的生命周期是在僅在當前會話下有效。sessionStorage引入了一個“瀏覽器窗口”的概念，sessionStorage是在同源的窗口中始終存在的數據。sessionStorage只要這個瀏覽器窗口沒有關閉，即使刷新頁面或者進入同源另一個頁面，數據依然存在。但是sessionStorage在關閉了瀏覽器窗口后就會被銷毀。同時獨立的打開同一個窗口同一個頁面，sessionStorage也是不一樣的。
2、存儲大小：localStorage和sessionStorage的存儲數據大小一般都是：5MB
3、存儲位置：localStorage和sessionStorage都保存在客戶端，不與服務器進行交互通信。
4、存儲內容類型：localStorage和sessionStorage只能存儲字符串類型，對于復雜的對象可以使用ECMAScript提供的JSON對象的stringify和parse來處理
5、獲取方式：localStorage：window.localStorage;；sessionStorage：window.sessionStorage;。
6、應用場景：localStoragese：常用于長期登錄（+判斷用戶是否已登錄），適合長期保存在本地的數據。sessionStorage：敏感賬號一次性登錄；

二、對比

三、使用

Cookie1： vue-cookies安裝 npm install vue-cookies --save使用 import VueCookies from 'vue-cookies' Vue.use(VueCookies)API this.$cookies.set(keyName,value) this.$cookies.get(keyName) this.$cookies.remove(keyName)2：js-cookie安裝 npm install js-cookie --save 使用 import Cookies from 'js-cookie'API Cookies.set('keyName',value) Cookies.get(keyName) Cookies.remove(keyName)在Cookie中存對象后取出的時候需要把字符串轉成json格式 const liaUser = JSON.parse(Cookies.get("user")) LocalStorage和sessionStorage具有相同的操作方法1：sessionStorage.setItem("key“，“value”)2：sessionStorage.getItem("key")3：sessionStorage.removeItem("key“)4：sessionStorage.clear()5：點操作和[]操作 sessionStorage.key = "value" sessionStorage["key"] = "value"

這篇文章講的挺詳細的：cookies、sessionStorage和localStorage解釋及區別

寫到這里，解決最初的問題只需將所有的localStorage替換成sessionStorage就好了 😃

總結

以上是生活随笔為你收集整理的Vue项目代码改进（三）—— Cookie、LocalStorage和SessionStorage的使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。