淺談前端開發(fā)中Cookie的一些事

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

cookie的屬性

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

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

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

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

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

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

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

domain屬性

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

path屬性

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

secure屬性

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

HttpOnly屬性

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

cookie的傳輸

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

cookie的編碼和解碼

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

cookie作為客戶端存儲

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

同名的 cookie

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

新聞標題：淺談前端開發(fā)中Cookie的一些事
本文網(wǎng)址：http://www.muchs.cn/news44/322894.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供用戶體驗、網(wǎng)站營銷、ChatGPT、App設(shè)計、外貿(mào)建站、企業(yè)建站

廣告

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