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

YXi發表於2019-10-22

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

相關文章