前段時(shí)間做了項(xiàng)目，在前端實(shí)現(xiàn)中頻繁的操作cookie，記錄幾點(diǎn)供大家參考！

cookie操作在前端開發(fā)過程中經(jīng)常遇到，當(dāng)然如果只是用來存儲(chǔ)一些簡(jiǎn)單用戶數(shù)據(jù)，還是比較簡(jiǎn)單的，我們要做的可能只是設(shè)置cookie名，值，過期時(shí)間等，讀取也只要根據(jù)cookie的名讀取相應(yīng)的cookie值就可以了。在復(fù)雜的應(yīng)用中，光這些肯定就不夠了。

cookie的屬性

除了name（名）和value（值），cookie還有以下一些可選屬性，用來控制cookie的有效期，作用域，安全性等：

expires屬性
指定了cookie的生存期，默認(rèn)情況下cookie是暫時(shí)存在的，他們存儲(chǔ)的值只在瀏覽器會(huì)話期間存在，當(dāng)用戶退出瀏覽器后這些值也會(huì)丟失，如果想讓cookie存在一段時(shí)間，就要為expires屬性設(shè)置為未來的一個(gè)用毫秒數(shù)表示的過期日期或時(shí)間點(diǎn)，expires默認(rèn)為設(shè)置的expires的當(dāng)前時(shí)間。現(xiàn)在已經(jīng)被max-age屬性所取代，max-age用秒來設(shè)置cookie的生存期。

如果max-age屬性為正數(shù)，則表示該cookie會(huì)在max-age秒之后自動(dòng)失效。瀏覽器會(huì)將max-age為正數(shù)的cookie持久化，即寫到對(duì)應(yīng)的cookie文件中。無(wú)論客戶關(guān)閉了瀏覽器還是電腦，只要還在max-age秒之前，登錄網(wǎng)站時(shí)該cookie仍然有效。

如果max-age為負(fù)數(shù)，則表示該cookie僅在本瀏覽器窗口以及本窗口打開的子窗口內(nèi)有效，關(guān)閉窗口后該cookie即失效。max-age為負(fù)數(shù)的Cookie，為臨時(shí)性cookie，不會(huì)被持久化，不會(huì)被寫到cookie文件中。cookie信息保存在瀏覽器內(nèi)存中，因此關(guān)閉瀏覽器該cookie就消失了。cookie默認(rèn)的max-age值為-1。

?如果max-age為0，則表示刪除該cookie。cookie機(jī)制沒有提供刪除cookie的方法，因此通過設(shè)置該cookie即時(shí)失效實(shí)現(xiàn)刪除cookie的效果。失效的Cookie會(huì)被瀏覽器從cookie文件或者內(nèi)存中刪除。

如果不設(shè)置expires或者max-age這個(gè)cookie默認(rèn)是Session的，也就是關(guān)閉瀏覽器該cookie就消失了。

這里要說明一下：Session的cookie在ie6下，如果用戶實(shí)在網(wǎng)頁(yè)上跳轉(zhuǎn)打開頁(yè)面或新開窗口（包括target=”_blank”，鼠標(biāo)右鍵新開窗口），都是在同一個(gè)Session內(nèi)。如果用戶新開瀏覽器程序或者說是進(jìn)程再打開當(dāng)前的頁(yè)面就不是同一個(gè)Session。其他瀏覽器只要你Session存在，還是同一個(gè)Session，cookie還能共享。在前段時(shí)間的項(xiàng)目中ie6下吃了很大一個(gè)虧。

domain屬性
domain屬性可以使多個(gè)web服務(wù)器共享cookie。domain屬性的默認(rèn)值是創(chuàng)建cookie的網(wǎng)頁(yè)所在服務(wù)器的主機(jī)名。不能將一個(gè)cookie的域設(shè)置成服務(wù)器所在的域之外的域。
例如讓位于a.sodao.com的服務(wù)器能夠讀取b.sodao.com設(shè)置的cookie值。如果b.sodao.com的頁(yè)面創(chuàng)建的cookie把它的path屬性設(shè)置為“/”，把domain屬性設(shè)置成“.sodao.com”，那么所有位于b.sodao.com的網(wǎng)頁(yè)和所有位于a.sodao.com的網(wǎng)頁(yè)，以及位于sodao.com域的其他服務(wù)器上的網(wǎng)頁(yè)都可以訪問這個(gè)cookie。

path屬性
它指定與cookie關(guān)聯(lián)在一起的網(wǎng)頁(yè)。在默認(rèn)的情況下cookie會(huì)與創(chuàng)建它的網(wǎng)頁(yè)，該網(wǎng)頁(yè)處于同一目錄下的網(wǎng)頁(yè)以及與這個(gè)網(wǎng)頁(yè)所在目錄下的子目錄下的網(wǎng)頁(yè)關(guān)聯(lián)

secure屬性
它是一個(gè)布爾值，指定在網(wǎng)絡(luò)上如何傳輸cookie，默認(rèn)是不安全的，通過一個(gè)普通的http連接傳輸；

HttpOnly屬性
HttpOnly 屬性限制了 cookie 對(duì) HTTP 請(qǐng)求的作用范圍。特別的，該屬性指示用戶代理忽略那些通過“非 HTTP” 方式對(duì) cookie 的訪問（比如瀏覽器暴露給js的接口）。注意 HttpOnly 屬性和 Secure 屬性相互獨(dú)立：一個(gè) cookie 既可以是 HttpOnly 的也可以有 Secure 屬性。
在前段時(shí)間的項(xiàng)目中我就用js去讀取一個(gè)cookie，結(jié)果怎么都取不到這個(gè)值，最后查證這個(gè)cookie是httpOnly的，花了近2個(gè)小時(shí)，悲劇了。

cookie的傳輸

瀏覽器將cookie信息以name-value對(duì)的形式存儲(chǔ)于本地，每當(dāng)請(qǐng)求新文檔時(shí)，瀏覽器將發(fā)送Cookie，目的是讓Server可以通過HTTP請(qǐng)求追蹤客戶。所以從WEB性能的角度來說我們要盡量的減小cookie，以達(dá)到傳輸性能的最大化。

cookie的編碼和解碼

由于cookie的名/值中的值不允許包含分號(hào)，逗號(hào)和空格符，為了最大化用戶代理和服務(wù)器的兼容性，任何被存儲(chǔ)為 cookie 值的數(shù)據(jù)都應(yīng)該被編碼，例如用我們前端熟知的js全局函數(shù)encodeURIComponent編碼和decodeURIComponent解碼。

cookie作為客戶端存儲(chǔ)

前面說了每當(dāng)請(qǐng)求新文檔時(shí)，瀏覽器將發(fā)送Cookie到服務(wù)器，導(dǎo)致WEB性能下降。所以不建議將cookie作為客戶端存儲(chǔ)一種實(shí)現(xiàn)方案，替代方案參見：JavaScript本地存儲(chǔ)實(shí)踐（html5的localStorage和ie的userData）等。

同名的 cookie

同名的 cookie，不同的 domain 或不同的 path，屬不同的 cookie；同名的 cookie，相同的 domain 且相同的 path，不同的 expires，屬同一個(gè) cookie。

總結(jié)

以上是生活随笔為你收集整理的前端开发中Cookie那些事儿的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。