cookie

　　Cookie，有時也用其複數形式 Cookies。型別為“小型文字檔案”，是某些網站為了辨別使用者身份，進行Session跟蹤而儲存在使用者本地終端上的資料（通常經過加密），由使用者客戶端計算機暫時或永久儲存的資訊 

　　當我們第一次請求網頁內容的時候是沒有任何cookie的，伺服器在收到請求以後會在HTTP響應頭部裡新增Set-cookie,並且在Set-cookie裡進行標識，

在下一次請求的時候瀏覽器就會在HTTP請求裡新增頭部Cookie,並且用上set-cookie裡的標識，這樣伺服器就可以給不同使用者匹配不同的內容了。

重點：自從伺服器給了Set-cookie以後，以後每一次HTTP請求都要把Cookie資料傳送到伺服器，這樣很浪費頻寬和效能資源，所以cookie設計的很小，限制為4kb左右,

多用來儲存使用者登入資訊，例如登入網站的記錄密碼，通常是通過在cookie中存入使用者資料實現的。

可設定失效時間，預設是關閉瀏覽器後失效

cookie儲存：

document.cookie = 'username=dary' // 存一條username為dary的cookie

但是如果當我們要存一條中文的cookie，比如：username=張三，在部分低版本瀏覽器就會遇到一些位置錯誤，這時就可以使用 encodeURIComponent 編碼對中文進行編碼：

document.cookie = `username=encodeURIComponent('張三')`

 以後取得時候我們可以通過decodeURIComponent 方法進行解碼

cookie的時效

上圖中有Expires/max-Age選項，這一項指的就是cookie的有效期，我們可以看到是session，代表會話期，也就是預設的會話結束cookie失效，這時我們重啟瀏覽器就看不到這條cookie了。

除了預設的會話過期我們還可以手動設定cookie的過期時間，比如：7天后過期　

var date = new Date()
date.setDate(date.getDate() + 7)
document.cookie = `username=${encodeURIComponent('大林')};expires=${date.toUTCString()}`

 cookie儲存路徑

　我們來測試一下路徑，隨便進入專案中某一個目錄或者新建一個目錄，然後把一下程式碼放進去執行

document.cookie = 'username=dary'

 我們可以看到，path不再是之前的 / 了，而是當前目錄，這時我們再回到首頁，你會發現，這條cookie不見了，因為外層時訪問不了內層目錄存的cookie的。

所以我們一般存cookie都會這麼寫：

document.cookie = 'username=dary;path=/'

　　這樣專案中任意位置都可以訪問這一條cookie

修改cookie

在 JavaScript 中，修改 cookie 類似於建立 cookie

document.cookie = 'username=dary2;path=/'

　　舊的 cookie 將被覆蓋。

刪除coookie

刪除 cookie 非常簡單。您只需要設定 expires 引數為以前的時間即可，如下所示，設定為 Thu, 01 Jan 1970 00:00:00 GMT:

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

刪除時不必指定 cookie 的值。

 如何進行身份認證，保持使用者登入狀態

我們登入一次網站後，很長時間不用再重新輸入使用者名稱和密碼，就能保持登入狀態，可以有多種實現技術：

第一種：cookie

可以讓使用者選擇記住使用者名稱密碼，用cookie實現，即將使用者名稱和密碼儲存在瀏覽器中，每次發請求需要帶上使用者名稱和密碼，但是將使用者名稱密碼放在瀏覽器中，可能會被黑客破解，不太安全，因此有了session

第二種：session

我們將使用者名稱密碼傳送給服務端，服務端核對是正確的，建立一個sessionID和會話結束時間，sessionID通常是一串沒有規律的字串。伺服器將sessionID和會話結束時間傳送給瀏覽器，

這裡就用到了cookie,設定cookie並將sessionID加入到cookie,把對話結束時間設定為cookie有效期，瀏覽器儲存了sessionID和會話時間。如果黑客拿到了sessionID,也無法破解。

第三種：token

隨著網際網路發展，使用者群體變得越來越大，如果伺服器依舊使用基於cookie的session,在特定時間有大量使用者訪問伺服器的時候，伺服器就面臨可能需要儲存大量Session ID在伺服器裡，但是

如果有多臺伺服器，一臺伺服器儲存了SessionID,又會面臨需要分享sessionID給其它伺服器，因為可能這臺伺服器超載需要分配一些使用者到其他伺服器，其它伺服器需要通用的session ID才可以

避免使用者再次輸入使用者名稱和密碼，於是可以讓資料庫儲存sessionID,但是資料庫如果崩潰了，又會影響伺服器獲取sessionID,各種需求的前提下，出現了JSON Web Token

首先使用者第一次登入網頁後，伺服器就會生成一個JWT，伺服器不需要儲存這個JWT,只需要儲存JWT簽名的密文，接著把JWT傳送給瀏覽器，可以讓瀏覽器以cookie或者storage的形式儲存。假設

以cookie儲存，這樣使用者每次傳送請求都會把這個JWT發給伺服器，使用者就不需要重新輸入使用者名稱密碼了，和session很類似。這裡的token只不過儲存在使用者那邊而已。

總結：

session是誕生並且儲存在伺服器那邊的，由伺服器主導一切，而cookie則是一種資料載體，把session放入cookie中送到客戶端那邊，cookie跟隨著HTTP的每個請求傳送出去。

token是誕生在伺服器，但儲存在瀏覽器這邊的，由客戶端主導一切，可以房子cookie或者storage裡面，持有token就像持有令牌一樣可以允許訪問伺服器。

localstorage 和 sessionstorage

HTML5有了web儲存，其中兩個重要的物件就是localStorage和sessionStorage，localStorage 和 sessionStorage 屬性允許在瀏覽器中儲存 key/value 對的資料

localstorage 

localstorage是儲存在瀏覽器中，除非被手動清除，否則永久儲存。

 語法：

 localStorage.setItem()
 localStorage.getItem()
 localStorage.removeItem()　

侷限性：

1.目前所有的瀏覽器中都會把localStorage的值型別限定為string型別，這個在對我們日常比較常見的JSON物件型別需要一些轉換。

2.localStorage在瀏覽器的隱私模式下面是不可讀取的。

3.localStorage本質上是對字串的讀取，如果儲存內容多的話會消耗記憶體空間，會導致頁面變卡

注意：

 1.localStorage 的使用也是遵循同源策略的，所以不同的網站直接是不能共用相同的 localStorage。

2.如果儲存進去的是 int 型別，打印出來卻是 string 型別，這個與 localStorage 本身的特點有關，localStorage 只支援 string 型別的儲存。

sessionstorage

sessionstorage與localStorage類似；唯一的區別是僅在當前會話下有效，關閉視窗或瀏覽器後被清除

區別