好程序員Web前端教程分享新手應該了解的Cookie知識！

10多年建站經驗， 網站設計制作、網站設計客戶的見證與正確選擇。成都創新互聯公司提供完善的營銷型網頁建站明細報價表。后期開發更加便捷高效，我們致力于追求更美、更快、更規范。

一、Cookie的出現

瀏覽器和服務器之間的通信少不了HTTP協議，但是因為HTTP協議是無狀態的，所以服務器并不知道上一次瀏覽器做了什么樣的操作，這樣嚴重阻礙了交互式Web應用程序的實現。

二、Cookie的傳輸

服務器端在實現Cookie標準的過程中，需要對任意HTTP請求發送Set-CookieHTTP頭作為響應的一部分：

1.Set-Cookie:name=value;expires=Tue,03-Sep-201914:10:21GMT;path=/;domain=.xxx.com;

瀏覽器端會存儲這樣的Cookie，并且為之后的每個請求添加CookieHTTP請求頭發送回服務器：

1.Cookie:name=value

服務器通過驗證Cookie值，來判斷瀏覽器發送請求屬于哪一個用戶。

三、瀏覽器中的Cookie

瀏覽器中的Cookie主要由以下幾部分組成：

·名稱：Cookie唯一的名稱，必須經過URL編碼處理。(同名會出現覆蓋的情況)

·值：必須經過URL編碼處理。

·域(domain)：默認情況下cookie在當前域下有效，你也可以設置該值來確保對其子域是否有效。

·路徑(path)：指定Cookie在哪些路徑下有效，默認是當前路徑下。

·失效時間(expires)：默認情況下，瀏覽器會話結束時會自動刪除Cookie;也可以設置一個GMT格式的日期，指定具體的刪除日期;如果設置的日期為以前的日期，那么Cookie會立即刪除。

·安全標志(secure)：指定之后只允許Cookie發送給https協議。

瀏覽器在發送請求時，只會將名稱與值添加到請求頭的Cookie字段中，發送給服務端。

瀏覽器提供了一個非常蹩腳的API來操作Cookie：

1.document.cookie

通過上述方法可以對該Cookie進行寫操作，每一次只能寫入一條Cookie字符串：

1.document.cookie='a=1;secure;path=/'

通過該方法還可以進行Cookie的讀操作：

1.document.cookie//"a=1"

由于上述方法操作Cookie非常的不直觀，一般都會寫一些函數來簡化Cookie讀取、設置和刪除操作。

對于Cookie的設置操作中，需要以下幾點：

對于名稱和值進行URL編碼處理，也就是采用JavaScript中的encodeURIComponent()方法;expires要求傳入GMT格式的日期，需要處理為更易書寫的方式，比如：設置秒數的方式;注意只有的屬性名的secure;

每一段信息需要采用分號加空格。

1.functionsetCookie(key,value,attributes){

2.if(typeofdocument==='undefined'){

3.return

4.}

5.attributes=Object.assign({},{

6.path:'/'

7.},attributes)

8.

9.let{domain,path,expires,secure}=attributes

10.

11.if(typeofexpires==='number'){

12.expires=newDate(Date.now()+expires*1000)

13.}

14.if(expiresinstanceofDate){

15.expires=expires.toUTCString()

16.}else{

17.expires=''

18.}

19.

20.key=encodeURIComponent(key)

21.value=encodeURIComponent(value)

22.

23.letcookieStr=`${key}=${value}`

24.

25.if(domain){

26.cookieStr+=`;domain=${domain}`

27.}

28.

29.if(path){

30.cookieStr+=`;path=${path}`

31.}

32.

33.if(expires){

34.cookieStr+=`;expires=${expires}`

35.}

36.

37.if(secure){

38.cookieStr+=`;secure`

39.}

40.

41.return(document.cookie=cookieStr)

42.}

Cookie的讀操作需要注意的是將名稱與值進行URL解碼處理，也就是調用JavaScript中的decodeURIComponent()方法：

1.functiongetCookie(name){

2.if(typeofdocument==='undefined'){

3.return

4.}

5.letcookies=[]

6.letjar={}

7.document.cookie&&(cookies=document.cookie.split(';'))

8.

9.for(leti=0,max=cookies.length;i<max;i++){

10.let[key,value]=cookies[i].split('=')

11.key=decodeURIComponent(key)

12.value=decodeURIComponent(value)

13.jar[key]=value

14.if(key===name){

15.break

16.}

17.}

18.

19.returnname?jar[name]:jar

20.}

最后一個清除的方法就更加簡單了，只要將失效日期(expires)設置為過去的日期即可：

1.functionremoveCookie(key){

2.setCookie(key,'',{expires:-1})

3.}

介紹Cookie基本操作的封裝之后，還需要了解瀏覽器為了限制Cookie不會被惡意使用，規定了Cookie所占磁盤空間的大小以及每個域名下Cookie的個數。

四、服務端的Cookie

相比較瀏覽器端，服務端執行Cookie的寫操作時，是將拼接好的Cookie字符串放入響應頭的Set-Cookie字段中;執行Cookie的讀操作時，則是解析HTTP請求頭字段Cookie中的鍵值對。

與瀏覽器大的不同，在于服務端對于Cookie的安全性操碎了心

signed

當設置signed=true時，服務端會對該條Cookie字符串生成兩個Set-Cookie響應頭字段：

1.Set-Cookie:lastTime=2019-03-05T14:31:05.543Z;path=/;httponly

2.Set-Cookie:lastTime.sig=URXREOYTtMnGm0b7qCYFJ2Db400;path=/;httponly

這里通過再發送一條以.sig為后綴的名稱以及對值進行加密的Cookie，來驗證該條Cookie是否在傳輸的過程中被篡改。

httpOnly

服務端Set-Cookie字段中新增httpOnly屬性，當服務端在返回的Cookie信息中含有httpOnly字段時，開發者是不能通過JavaScript來操縱該條Cookie字符串的。

這樣做的好處主要在于面對XSS(Cross-sitescripting)gongji時，***無法拿到設置httpOnly字段的Cookie信息。

此時，你會發現localStorage相比較Cookie，在XSSgongji的防御上就略遜一籌了。sameSite

在介紹這個新屬性之前，首先你需要明白：當用戶從http://a.com發起http://b.com的請求也會攜帶上Cookie，而從http://a.com攜帶過來的Cookie稱為第三方Cookie。

雖然第三方Cookie有一些好處，但是給CSRF(Cross-siterequestforgrey)gongji的機會。

為了從根源上解決CSRFgongji，sameSite屬性便閃亮登場了，它的取值有以下幾種：

·strict：瀏覽器在任何跨域請求中都不會攜帶Cookie，這樣可以有效的防御CSRFgongji，但是對于有多個子域名的網站采用主域名存儲用戶登錄信息的場景，每個子域名都需要用戶重新登錄，造成用戶體驗非常的差。

·lax：相比較strict，它允許從三方網站跳轉過來的時候使用Cookie。

為了方便大家理解sameSite的實際效果，可以看這個例子：

1.//a.com服務端會在訪問頁面時返回如下Cookie

2.cookies.set('foo','aaaaa')

3.cookies.set('bar','bbbbb')

4.cookies.set('name','cccccc')

5.

6.//b.com服務端會在訪問頁面時返回如下Cookie

7.cookies.set('foo','a',{sameSite:'strict'})

8.cookies.set('bar','b',{sameSite:'lax'})

9.cookies.set('baz','c')

如何現在用戶在a.com中點擊鏈接跳轉到b.com，它的請求頭是這樣的：

1.RequestHeaders

2.

3.Cookie:bar=b;baz=c

五、網站性能優化

Cookie在服務端和瀏覽器的通信中，主要依靠HTTP的響應頭和請求頭傳輸的，所以Cookie會占據一定的帶寬。

前面提到瀏覽器會為每一次HTPP請求自動攜帶上Cookie信息，但是對于同站內的靜態資源，服務器并不需要處理其攜帶的Cookie，這無形中便浪費了帶寬。

另外有需要云服務器可以了解下創新互聯cdcxhl.cn，海內外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業上云的綜合解決方案，具有“安全穩定、簡單易用、服務可用性高、性價比高”等特點與優勢，專為企業上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

分享題目：好程序員Web前端教程分享新手應該了解的Cookie知識！-創新互聯
標題URL：http://vcdvsql.cn/article20/icpjo.html

成都網站建設公司_創新互聯，為您提供服務器托管、軟件開發、標簽優化、網站導航、Google、網站改版

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯