理解cookie、session、localStorage、sessionStorage的關係與區別

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，只須要新建一個同名的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值。這個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");	//以「key」爲名稱存儲一個值「value」

localStorage.getItem("key");	//獲取名稱爲「key」的值

localStorage.removeItem("key");	//刪除名稱爲「key」的信息。

localStorage.clear();	//清空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，而且僅在客戶端（即瀏覽器）中保存，不參與和服務器的通訊。

---

C_C