cookie

什么是cookie?

由于HTTP是一種無狀態(tài)的協(xié)議，服務(wù)器單從網(wǎng)絡(luò)連接上是無法知道客戶身份的。這時(shí)候服務(wù)器就需要給客戶端頒發(fā)一個(gè)cookie，用來確認(rèn)用戶的身份。

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

原理:web服務(wù)器通過在http響應(yīng)消息頭增加Set-Cookie響應(yīng)頭字段將Cookie信息發(fā)送給瀏覽器，瀏覽器則通過在http請(qǐng)求消息中增加Cookie請(qǐng)求頭字段將Cookie回傳給web服務(wù)器。

cookie的構(gòu)成

服務(wù)器端向客戶端發(fā)送Cookie是通過HTTP響應(yīng)報(bào)文實(shí)現(xiàn)的，在Set-Cookie中設(shè)置需要向客戶端發(fā)送的cookie，cookie格式如下：

Set-Cookie: "name=value;domain=.domain.com;path=/;expires=Sat, 11 Jun 2019 11:29:42 GMT;HttpOnly;secure"
復(fù)制代碼

其中name=value是必選項(xiàng)，其它都是可選項(xiàng)。Cookie的主要構(gòu)成如下：

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

這里強(qiáng)調(diào)一點(diǎn)，是cookie的不可跨域名性
很多網(wǎng)站都會(huì)使用cookie，不同瀏覽器采用不同的方式保存Cookie，而且每個(gè)網(wǎng)站的Cookie只能夠被對(duì)應(yīng)的網(wǎng)站使用。意思就是說當(dāng)瀏覽器訪問Baidu時(shí)，只會(huì)帶Baidu的cookie，而不會(huì)帶其他網(wǎng)站的Cookie，這就是Cookie的不可跨域名性。 Cookie在客戶端是由瀏覽器來管理的。瀏覽器可以保證各個(gè)網(wǎng)站只能操作各個(gè)網(wǎng)站的Cookie，從而保證用戶的隱私安全。

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

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

如果要?jiǎng)h除某個(gè)Cookie，只需要新建一個(gè)同名的Cookie，并將maxAge設(shè)置為0，并添加到response中覆蓋原來的Cookie。注意是0而不是負(fù)數(shù)。負(fù)數(shù)代表其他的意義。

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

session

什么是session?

Session是另一種記錄客戶狀態(tài)的機(jī)制，不同的是Cookie保存在客戶端瀏覽器中，而Session保存在服務(wù)器上?？蛻舳藶g覽器訪問服務(wù)器的時(shí)候，服務(wù)器把客戶端信息以某種形式記錄在服務(wù)器上。

客戶端瀏覽器再次訪問時(shí)只需要從該Session中查找該客戶的狀態(tài)就可以了

session的工作步驟

因?yàn)镠TTP協(xié)議是無狀態(tài)的，Session不能依據(jù)HTTP連接來判斷是否為同一個(gè)用戶。于是乎：服務(wù)器向用戶瀏覽器發(fā)送了一個(gè)名為JESSIONID的Cookie，它的值是Session的id值。其實(shí)Session依據(jù)Cookie來識(shí)別是否是同一個(gè)用戶。

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

該Cookie是服務(wù)器自動(dòng)頒發(fā)給瀏覽器的，不用我們手工創(chuàng)建的。該Cookie的maxAge值默認(rèn)是-1，也就是說僅當(dāng)前瀏覽器使用，不將該Cookie存在硬盤中，并且各瀏覽器窗口間不共享，關(guān)閉瀏覽器就會(huì)失效。

工作步驟：

將客戶端稱為 client，服務(wù)端稱為 server

產(chǎn)生 sessionID：session 是基于 cookie 的一種方案，所以，首先要產(chǎn)生 cookie。client 第一次訪問 server，server 生成一個(gè)隨機(jī)數(shù)，命名為 sessionID，并將其放在響應(yīng)頭里，以 cookie 的形式返回給 client，client 以處理其他 cookie 的方式處理這段 cookie。大概是這樣：cookie：sessionID=135165432165
保存 sessionID： server 將要保存的數(shù)據(jù)保存在相對(duì)應(yīng)的 sessionID 之下，再將 sessionID 保存到服務(wù)器端的特定的保存 session 的內(nèi)存中（如一個(gè)叫 session 的哈希表）
使用 session： client 再次訪問 server，會(huì)帶上首次訪問時(shí)獲得的值為 sessionID 的cookie，server 讀取 cookie 中的 sessionID，根據(jù) sessionID 到保存 session 的內(nèi)存尋找與 sessionID 匹配的數(shù)據(jù)，若尋找成功就將數(shù)據(jù)返回給 client。

session的有效期

Session保存在服務(wù)器端。為了獲得更高的存取速度，服務(wù)器一般把Session放在內(nèi)存里。每個(gè)用戶都會(huì)有一個(gè)獨(dú)立的Session。如果Session內(nèi)容過于復(fù)雜，當(dāng)大量客戶訪問服務(wù)器時(shí)可能會(huì)導(dǎo)致內(nèi)存溢出。因此，Session里的信息應(yīng)該盡量精簡。

Session生成后，只要用戶繼續(xù)訪問，服務(wù)器就會(huì)更新Session的最后訪問時(shí)間，并維護(hù)該Session。用戶每訪問服務(wù)器一次，無論是否讀寫Session，服務(wù)器都認(rèn)為該用戶的Session“活躍（active）”了一次。

由于會(huì)有越來越多的用戶訪問服務(wù)器，因此Session也會(huì)越來越多。為防止內(nèi)存溢出，服務(wù)器會(huì)把長時(shí)間內(nèi)沒有活躍的Session從內(nèi)存刪除。這個(gè)時(shí)間就是Session的超時(shí)時(shí)間。如果超過了超時(shí)時(shí)間沒訪問過服務(wù)器，Session就自動(dòng)失效了。

cookie與session的區(qū)別

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

localStorage

什么是localStorage?

localStorage 是 HTML5 提供的一個(gè) API，他本質(zhì)上是一個(gè)hash（哈希表），是一個(gè)存在于瀏覽器上的 hash（哈希表）。

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

localStorage使用方法

localStorage和sessionStorage使用時(shí)使用相同的API：

localStorage.setItem("key","value");	//以“key”為名稱存儲(chǔ)一個(gè)值“value”
localStorage.getItem("key");	//獲取名稱為“key”的值
localStorage.removeItem("key");	//刪除名稱為“key”的信息。
localStorage.clear();	//清空localStorage中所有信息
復(fù)制代碼

localStorage 是一個(gè)保存于客戶端的哈希表，可以用來保存本地的一些數(shù)據(jù)。并且不會(huì)因?yàn)樗⑿露尫?/strong>，所以，可以使用 localStorage 來實(shí)現(xiàn)變量的持久化存儲(chǔ)

localStorage的特點(diǎn)

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

sessionStorage

sessionStorage 的所有性質(zhì)基本上與 localStorage 一致，唯一的不同區(qū)別在于：

sessionStorage 的有效期是頁面會(huì)話持續(xù)，如果頁面會(huì)話（session）結(jié)束（關(guān)閉窗口或標(biāo)簽頁），sessionStorage 就會(huì)消失。而 localStorage 則會(huì)一直存在。

localStorage與sessionStorage的區(qū)別

localStorage生命周期是永久的，除非被清除，否則永久保存，而sessionStorage僅在當(dāng)前會(huì)話下有效，關(guān)閉頁面或?yàn)g覽器后被清除

相同點(diǎn)可以參考localStorage的特點(diǎn)

這里再強(qiáng)調(diào)一下，這兩個(gè)存儲(chǔ)方式用來存放數(shù)據(jù)大小一般為5MB，并且僅在客戶端（即瀏覽器）中保存，不參與和服務(wù)器的通信。

原文鏈接：https://juejin.im/post/5daedc74518825374b6a17d4