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

一、基本概念

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

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

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

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

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

2. LocalStorage（ HTML5的本地存儲）

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

3.SessionStorage（ HTML5的本地存儲）

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

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

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

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

總結

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

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