前端開發中Cookie那些事兒：cookie屬性詳解

前段時間做了項目，在前端實現中頻繁的操作cookie，記錄幾點供大家參考！

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

cookie的屬性

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

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

如果max-age屬性為正數，則表示該cookie會在max-age秒之後自動失效。浏覽器會將max-age為正數的cookie持久化，即 寫到對應的cookie文件中。無論客戶關閉了浏覽器還是電腦，只要還在max-age秒之前，登錄網站時該cookie仍然有效。

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

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

如果不設置expires或者max-age這個cookie默認是Session的，也就是關閉浏覽器該cookie就消失了。

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

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

path屬性
  它指定與cookie關聯在一起的網頁。在默認的情況下cookie會與創建它的網頁，該網頁處於同一目錄下的網頁以及與這個網頁所在目錄下的子目錄下的網頁關聯

secure屬性
  它是一個布爾值，指定在網絡上如何傳輸cookie，默認是不安全的，通過一個普通的http連接傳輸；

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

cookie的傳輸

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

cookie的編碼和解碼

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

cookie作為客戶端存儲

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

同名的 cookie

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

文章來源：搜道UED