Cookie

cookie是服務(wù)器向用戶瀏覽器發(fā)送的一小塊數(shù)據(jù)，保存在用戶的電腦中，cookie會(huì)在下一次瀏覽器向同一個(gè)服務(wù)器發(fā)送請(qǐng)求的時(shí)候隨請(qǐng)求一起被發(fā)送至服務(wù)器。使用它可以告知服務(wù)器兩次請(qǐng)求是否來(lái)自同一個(gè)瀏覽器，可以實(shí)現(xiàn)保持用戶登錄狀態(tài)等功能。

創(chuàng)建cookie

服務(wù)器收到http請(qǐng)求后，在響應(yīng)頭中添加Set-Cookie選項(xiàng)并添加信息。cookie一般是是以鍵值對(duì)的形式存在。比如下面這個(gè)響應(yīng)頭。

HTTP/1.0 200 OK
Content-type: text/html
Set-Cookie: yummy_cookie=choco
Set-Cookie: tasty_cookie=strawberry

[頁(yè)面內(nèi)容]

之后，如果瀏覽器再次向該服務(wù)器發(fā)起請(qǐng)求，則會(huì)在請(qǐng)求頭中附帶上cookie信息。

GET /sample_page.html HTTP/1.1
Host: www.example.org
Cookie: yummy_cookie=choco; tasty_cookie=strawberry

cookie生命周期

• 默認(rèn)情況下，瀏覽器關(guān)閉后cookie就會(huì)被刪除，這種情況下我們沒(méi)有指定過(guò)期時(shí)間（expires）或者說(shuō)是（Max-Age）。某些包含會(huì)話回復(fù)功能的瀏覽器會(huì)保存這種cookie，延長(zhǎng)它的生命周期。
• 通過(guò)指定過(guò)期時(shí)間，可以長(zhǎng)久的保存cookie。將cookie的過(guò)期時(shí)間設(shè)定為過(guò)去可以立即刪除cookie。

下面就是一個(gè)設(shè)定了過(guò)期時(shí)間的cookie。cookie的過(guò)期時(shí)間需要設(shè)置為GMT格式。

Set-Cookie: id=a3fWa; Expires=Mon, 3 Oct 2022 07:28:00 GMT;

限制訪問(wèn)

為保證cookie在傳輸過(guò)程中的安全性，可以使用Secure和HttpOnly屬性。

Secure屬性可以讓cookie只經(jīng)過(guò)被https加密后的請(qǐng)求進(jìn)行發(fā)送。但也并非絕對(duì)安全的措施。

HttpOnly屬性可以讓JavaScript的Document.cookieAPI無(wú)法訪問(wèn)cookie信息，對(duì)于保持和服務(wù)端對(duì)話的cookie來(lái)說(shuō)，沒(méi)有必要讓將它們的信息暴露給JavaScript代碼，這樣做還可以防范XSS（跨站點(diǎn)腳本攻擊）。

比如

Set-Cookie: id=a3fWa; Expires=Mon, 3 Oct 2022 07:28:00 GMT; Secure; HttpOnly

作用域

作用域是設(shè)置可以向哪些URL發(fā)送cookie的選項(xiàng)。通過(guò)Domain和path屬性來(lái)進(jìn)行設(shè)置

Domain指定哪些主機(jī)可以接收cookie，如果不指定則默認(rèn)只對(duì)其本身有效，子域名均不可讀取cookie。指定之后，則其下的所有子域名都可以接收cookie。

path使用/進(jìn)行路徑分割。如果設(shè)置path = /doc則下面所有地址都可以接收cookie

• /doc
• doc/Web
• doc/Web/http

cookie的特性和使用場(chǎng)景

特性：

• cookie創(chuàng)建成功后名稱無(wú)法再修改。
• cookie無(wú)法跨域名，這個(gè)在cookie的定義的時(shí)候已經(jīng)說(shuō)明了，這是符合cookie的本意的。
• 同一域名下不能設(shè)置超過(guò)20個(gè)cookie，每個(gè)cookie的大小不能超過(guò)4kb。

如果非要跨域名共享cookie，可以使用Nginx反向代理（正向代理代理客戶端，反向代理則代理服務(wù)器），或者登錄一個(gè)網(wǎng)站后向另一網(wǎng)站寫cookie。

使用場(chǎng)景：

• 保持用戶登錄狀態(tài)
• 統(tǒng)計(jì)頁(yè)面點(diǎn)擊次數(shù)

localStorage

當(dāng)數(shù)據(jù)量較大且不需要頻繁在瀏覽器和服務(wù)器之間來(lái)往的時(shí)候，就可以使用localStorage。

localStorage的出現(xiàn)解決了cookie存儲(chǔ)數(shù)據(jù)的許多難點(diǎn)

• 大小限制為5MB，比cookie容量大，能夠存儲(chǔ)更多的信息。
• 直接存儲(chǔ)在本地，除非用戶主動(dòng)清理否則一直有效。
• 僅在本地存儲(chǔ)，不會(huì)在每次發(fā)送請(qǐng)求時(shí)被攜帶。

當(dāng)然也有一些問(wèn)題。

• 受到同源策略的限制。必須是同一協(xié)議、域名和端口下的站點(diǎn)才能訪問(wèn)。
• 瀏覽器兼容問(wèn)題，IE8以下不兼容。（因?yàn)槭荋MLT5提出的新規(guī)范，IE的時(shí)代已經(jīng)結(jié)束咧?。?/li>
• 隱私模式下的瀏覽器無(wú)法讀取。

常用API

//保存數(shù)據(jù)
localStorage.setItem('name', 'value')
//讀取數(shù)據(jù)
let data = localStorage.getItem('name')
//刪除數(shù)據(jù)
localStorage.removeItem('name')
//清除所有數(shù)據(jù)
localStorage.clear()
//獲取指定索引值數(shù)據(jù)
localStorage.key(index)

sessionStorage

sessionStorage是和localStorge一起提出來(lái)的客戶端存儲(chǔ)策略。

sessionStorage和localStorage的最大的不同之處在于“短命”。雖然二者都是在本地存儲(chǔ)數(shù)據(jù)，但是一旦頁(yè)面或者瀏覽器關(guān)閉，sessionStorage的數(shù)據(jù)就會(huì)被清除。如果是因?yàn)闉g覽器崩潰而關(guān)閉的頁(yè)面的話，它還可以恢復(fù)頁(yè)面，但這得取決于瀏覽器是否支持。

sessionStorage也受到同源策略的限制，并且附加上一條更加嚴(yán)格的限制，必須是同一瀏覽器下的同一個(gè)頁(yè)面才能共享sessionStorage下的數(shù)據(jù)。

sessionStorage和localStorage的API基本相同。

應(yīng)用場(chǎng)景

由于是臨時(shí)會(huì)話信息存儲(chǔ)，所以經(jīng)常用來(lái)保存網(wǎng)站的游客登錄或者瀏覽信息。