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

YXi發表於2019-10-22
CookieSession

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

相關文章