cookie

什麼是cookie?

由於HTTP是一種無狀態的協議，伺服器單從網絡連接上是無法知道客戶身份的。這時候伺服器就需要給客戶端頒發一個cookie，用來確認用戶的身份。

簡單的說，cookie就是客戶端保存用戶信息的一種機制，用來記錄用戶的一些信息。

原理:web伺服器通過在http響應消息頭增加Set-Cookie響應頭欄位將Cookie信息發送給瀏覽器，瀏覽器則通過在http請求消息中增加Cookie請求頭欄位將Cookie回傳給web伺服器。

cookie的構成

伺服器端向客戶端發送Cookie是通過HTTP響應報文實現的，在Set-Cookie中設置需要向客戶端發送的cookie，cookie格式如下：

Set-Cookie: "name=value;domain=.domain.com;path=/;expires=Sat, 11 Jun 2019 11:29:42 GMT;HttpOnly;secure"
複製代碼

其中name=value是必選項，其它都是可選項。Cookie的主要構成如下：

• name:一個唯一確定的cookie名稱。通常來講cookie的名稱是不區分大小寫的。
• value:存儲在cookie中的字符串值。最好為cookie的name和value進行url編碼
• domain:cookie對於哪個域是有效的。所有向該域發送的請求中都會包含這個cookie信息。這個值可以包含子域(如：e.baidu.com)，也可以不包含它(如：.baidu.com，則對於baidu.com的所有子域都有效)。
• path: 表示這個cookie影響到的路徑，瀏覽器跟會根據這項配置，像指定域中匹配的路徑發送cookie。
• expires:失效時間，表示cookie何時應該被刪除的時間戳(也就是，何時應該停止向伺服器發送這個cookie)。如果不設置這個時間戳，瀏覽器會在頁面關閉時即將刪除所有cookie；不過也可以自己設置刪除時間。這個值是GMT時間格式。如果客戶端和伺服器端時間不一致，使用expires就會存在偏差。並且如果給cookie設置一個過去的時間，瀏覽器會立即刪除該cookie
• max-age: 與expires作用相同，用來告訴瀏覽器此cookie多久過期（單位是秒），而不是一個固定的時間點。正常情況下，max-age的優先級高於expires。
• HttpOnly: 告知瀏覽器不允許通過腳本document.cookie去更改這個值，同樣這個值在document.cookie中也不可見。但在http請求張仍然會攜帶這個cookie。注意這個值雖然在腳本中不可獲取，但仍然在瀏覽器安裝目錄中以文件形式存在。這項設置通常在伺服器端設置。
• secure: 安全標誌，指定後，只有在使用SSL連結時候才能發送到伺服器，如果是http連結則不會傳遞該信息。

這裡強調一點，是cookie的不可跨域名性

很多網站都會使用cookie，不同瀏覽器採用不同的方式保存Cookie，而且每個網站的Cookie只能夠被對應的網站使用。意思就是說當瀏覽器訪問Baidu時，只會帶Baidu的cookie，而不會帶其他網站的Cookie，這就是Cookie的不可跨域名性 。 Cookie在客戶端是由瀏覽器來管理的。瀏覽器可以保證各個網站只能操作各個網站的Cookie，從而保證用戶的隱私安全。

cookie並不提供修改、刪除操作

如果要修改某個Cookie，只需要新建一個同名的Cookie，添加到response中覆蓋原來的Cookie。

如果要刪除某個Cookie，只需要新建一個同名的Cookie，並將maxAge設置為0，並添加到response中覆蓋原來的Cookie。注意是0而不是負數。負數代表其他的意義。

注意：修改、刪除Cookie時，新建的Cookie除value、maxAge之外的所有屬性，例如name、path、domain等，都要與原Cookie完全一樣。否則，瀏覽器將視為兩個不同的Cookie不予覆蓋，導致修改、刪除失敗。

session

什麼是session?

Session是另一種記錄客戶狀態的機制，不同的是Cookie保存在客戶端瀏覽器中，而Session保存在伺服器上。客戶端瀏覽器訪問伺服器的時候，伺服器把客戶端信息以某種形式記錄在伺服器上。

客戶端瀏覽器再次訪問時只需要從該Session中查找該客戶的狀態就可以了

session的工作步驟

因為HTTP協議是無狀態的，Session不能依據HTTP連接來判斷是否為同一個用戶。於是乎：伺服器向用戶瀏覽器發送了一個名為JESSIONID的Cookie，它的值是Session的id值。其實Session依據Cookie來識別是否是同一個用戶。

簡單來說：Session 之所以可以識別不同的用戶，依靠的就是Cookie，所以說session是基於cookie的

該Cookie是伺服器自動頒發給瀏覽器的，不用我們手工創建的。該Cookie的maxAge值默認是-1，也就是說僅當前瀏覽器使用，不將該Cookie存在硬碟中，並且各瀏覽器窗口間不共享，關閉瀏覽器就會失效。

工作步驟：

將客戶端稱為 client，服務端稱為 server

1. 產生 sessionID：session 是基於 cookie 的一種方案，所以，首先要產生 cookie。client 第一次訪問 server，server 生成一個隨機數，命名為 sessionID，並將其放在響應頭裡，以 cookie 的形式返回給 client，client 以處理其他 cookie 的方式處理這段 cookie。大概是這樣：cookie：sessionID=135165432165
2. 保存 sessionID： server 將要保存的數據保存在相對應的 sessionID 之下，再將 sessionID 保存到伺服器端的特定的保存 session 的內存中（如 一個叫 session 的哈希表）
3. 使用 session： client 再次訪問 server，會帶上首次訪問時獲得的 值為 sessionID 的cookie，server 讀取 cookie 中的 sessionID，根據 sessionID 到保存 session 的內存尋找與 sessionID 匹配的數據，若尋找成功就將數據返回給 client。

session的有效期

Session保存在伺服器端。為了獲得更高的存取速度，伺服器一般把Session放在內存里。每個用戶都會有一個獨立的Session。如果Session內容過於複雜，當大量客戶訪問伺服器時可能會導致內存溢出。因此，Session里的信息應該儘量精簡。

Session生成後，只要用戶繼續訪問，伺服器就會更新Session的最後訪問時間，並維護該Session。用戶每訪問伺服器一次，無論是否讀寫Session，伺服器都認為該用戶的Session「活躍（active）」了一次。

由於會有越來越多的用戶訪問伺服器，因此Session也會越來越多。為防止內存溢出，伺服器會把長時間內沒有活躍的Session從內存刪除。這個時間就是Session的超時時間。如果超過了超時時間沒訪問過伺服器，Session就自動失效了。

cookie與session的區別

• Cookie數據存放在客戶端，Session數據放在伺服器端
• Cookie的安全性一般，他人可通過分析存放在本地的Cookie並進行Cookie欺騙。在安全性第一的前提下，選擇Session更優。重要交互信息比如權限等就要放在Session中，一般的信息記錄放Cookie中
• 單個Cookie保存的數據不能超過4K，很多瀏覽器都限制一個站點最多保存20個Cookie，而Session原則上沒有限制
• Session會在一定時間內保存在伺服器上。當訪問增多，會比較占用你伺服器的性能考慮到減輕伺服器性能方面，應當使用Cookie。
• Session 的運行依賴Session ID，而 Session ID 是存在 Cookie 中的，也就是說，如果瀏覽器禁用了 Cookie，Session 也會失效（但是可以通過其它方式實現，比如在 url 中傳遞 Session ID，也就是地址重寫）

localStorage

什麼是localStorage?

localStorage 是 HTML5 提供的一個 API，他本質上是一個hash（哈希表），是一個存在於瀏覽器上的 hash（哈希表）。

localStorage生命周期是永久，這意味著除非用戶顯示在瀏覽器提供的UI上清除localStorage信息，否則這些信息將永遠存在。存放數據大小為一般為5MB,而且它僅在客戶端（即瀏覽器）中保存，不參與和伺服器的通信。

localStorage使用方法

localStorage和sessionStorage使用時使用相同的API：

localStorage.setItem("key","value");\t//以「key」為名稱存儲一個值「value」
localStorage.getItem("key");\t//獲取名稱為「key」的值
localStorage.removeItem("key");\t//刪除名稱為「key」的信息。
localStorage.clear();\t//清空localStorage中所有信息
複製代碼

localStorage 是一個保存於客戶端的哈希表，可以用來保存本地的一些數據。並且不會因為刷新而釋放，所以，可以使用 localStorage 來實現變量的持久化存儲

localStorage的特點

• localStorage 與 HTTP 沒有任何關係，所以在HTTP請求時不會帶上 localStorage 的值
• 只有相同域名的頁面才能互相讀取 localStorage，同源策略與 cookie 一致
• 不同的瀏覽器，對每個域名 localStorage 的最大存儲量的規定不一樣，超出存儲量會被拒絕。最大存5M 超過5M的數據就會丟失。而 Chrome 10MB 左右
• 常用來記錄一些不敏感的信息
• localStorage 理論上永久有效，除非用戶清理緩存

sessionStorage

sessionStorage 的所有性質基本上與 localStorage 一致，唯一的不同區別在於：

sessionStorage 的有效期是頁面會話持續，如果頁面會話（session）結束（關閉窗口或標籤頁），sessionStorage 就會消失。而 localStorage 則會一直存在。

localStorage與sessionStorage的區別

• localStorage生命周期是永久的，除非被清除，否則永久保存，而sessionStorage僅在當前會話下有效，關閉頁面或瀏覽器後被清除

相同點可以參考localStorage的特點

這裡再強調一下，這兩個存儲方式用來存放數據大小一般為5MB，並且僅在客戶端（即瀏覽器）中保存，不參與和伺服器的通信。

原文連結：https://juejin.im/post/5daedc74518825374b6a17d4