詳解 Cookie 紀要（vue.cookie，jquery.cookie簡化）
今天看到一篇cookie的文章，寫的特別詳細，感謝 晚晴幽草軒 的分享，原文鏈接http://www.jeffjade.com/2016/10/31/115-summary-of-cookie/
原文如下，記錄到此供以後查閱並希望好文章能被更多需要的人看到
背景
在HTTP協議的定義中，采用了一種機制來記錄客戶端和服務器端交互的信息，這種機制被稱為cookie，cookie規範定義了服務器和客戶端交互信息的格式、生存期、使用範圍、安全性。
在JavaScript中可以通過 document.cookie 來讀取或設置這些信息。由於 cookie 多用在客戶端和服務端之間進行通信，所以除了JavaScript以外，服務端的語言（如PHP）也可以存取 cookie。
Cookie詳解
Cookie在遠程瀏覽器端存儲數據並以此跟蹤和識別用戶的機制。從實現上說，Cookie是存儲在客戶端上的一小段數據，瀏覽器（即客戶端）通過HTTP協議和服務器端進行Cookie交互。
Cooke獨立於語言存在，嚴格地說，Cookie並不是由PHP、Java等語言實現的，而是由這些語言對Cookie進行間接操作，即發送HTTP指令，瀏覽器收到指令便操作Cookie並返回給服務器。因此，Cookie是由瀏覽器實現和管理的。舉例說，PHP並沒有真正設置過Cookie，只是發出指令讓瀏覽器來做這件事。PHP中可以使用setcookie() 或 setrawcookie() 函數設置Cookie。setcookie()最後一個參數HttpOnly設置了後，JavaScript就無法讀取到這個Cookie。
設置Cookie時需註意：①函數有返回值，false失敗，true成功，成功僅供參考，不代表客戶端一定能接收到；②PHP設置的Cookie不能立即生效，要等下一個頁面才能看到（Cookie從服務器傳給瀏覽器，下個頁面瀏覽器才能把設置的Cookie傳回給服務器）；如果是JavaScript設置的，是立即生效的；③Cookie沒有顯示的刪除函數，可以設置expire過期時間，自動觸發瀏覽器的刪除機制。
Cookie是HTTP頭的一部分，即現發送或請求Cookie，才是data域；setcookie()等函數必須在數據之前調用，這和header() 函數是相同的。不過也可以使用輸出緩沖函數延遲腳本的輸出，知道設置好所有Cookie和其他HTTP標頭。
Cookie通常用來存儲一些不是很敏感的信息，或者進行登錄控制，也可用來記住用戶名、記住免密碼登錄、防止刷票等。每個域名下允許的Cookie是有限制的，根據瀏覽器這個限制也不同。Cookie不是越多越好，它會增加寬帶，增加流量消耗，所以不要濫用Cookie；不要把Cookie當作客戶端的存儲器來用。一個域名的每個Cookie限制以4千字節（KB）鍵值對的形式存儲。
還有一種Cookie是Flash創建的，成為Flash Shard Object，又稱Flash Cookie，即使清空瀏覽器所有隱私數據，這類頑固的Cookie還會存在硬盤上，因為它只受Flash管理，很多網站采用這種技術識別用戶。
Cookie跨域，主要是為了統一應用平臺，實現單點登錄；需使用P3P協議（Platform for Privacy Preferences），通過P3P使用戶自己可以指定瀏覽器的隱私策略，達到存儲第三方Cookie的目的，只需要在響應用戶請求時，在HTTP的頭信息中增加關於P3P的配置信息就可以了。Cookie跨域涉及兩個不同的應用，習慣上稱為第一方和第三方。第三方通常是來自別人的廣告、或Iframe別的網站的URL，這些第三方網站可能使用的Cookie。
Cookie格式
Cookie中保存的信息都是文本信息，在客戶端和服務器端交互過程中，cookie信息被附加在HTTP消息頭中傳遞，cookie的信息由鍵/值對組成。下面是一個HTTP頭中cookie的例子：
Set-Cookie: key = value; Path=/
Cookie中存放的信息包含cookie本身屬性和用戶自定義屬性，一個cookie只能包含一個自定義鍵/值對。Cookie本身屬性有”Comment” 、”Domain”、”Max-Age”、”Path”、”Secure”、”Version”。
Comment 屬性是cookie的產生著對該cookie的描述；
Domain 屬性定義可訪問該cookie的域名，對一些大的網站，如果希望cookie可以在子網站中共享，可以使用該屬性。例如設置Domain為 .bigsite.com ,則sub1.bigsite.com和sub2.bigsite.com都可以訪問已保存在客戶端的cookie，這時還需要將Path設置為/。
Max-Age 屬性定義cookie的有效時間，用秒計數，當超過有效期後，cookie的信息不會從客戶端附加在HTTP消息頭中發送到服務端。
Path 屬性定義網站上可以訪問cookie的頁面的路徑，缺省狀態下Path為產生cookie時的路徑，此時cookie可以被該路徑以及其子路徑下的頁面訪問；可以將Path設置為/，使cookie可以被網站下所有頁面訪問。
Secure 屬性值定義cookie的安全性，當該值為true時必須是HTTPS狀態下cookie才從客戶端附加在HTTP消息中發送到服務端，在HTTP時cookie是不發送的；Secure為false時則可在HTTP狀態下傳遞cookie，Secure缺省為false。
Version 屬性定義cookie的版本，由cookie的創建者定義。
Cookie的創建
Cookie可以在服務器端創建，然後cookie信息附加在HTTP消息頭中傳到客戶端，如果cookie定義了有效期，則本保存在客戶端本地磁盤。保存cookie的文件是一個文本文件，因此不用擔心此文件中的內容會被執行而破壞客戶的機器。支持Web端開發的語言都有創建cookie的方法或函數，以及設置cookie屬性和添加自定義屬性的方法或函數，最後是將cookie附加到返回客戶端的HTTP消息頭中。
創建cookie時如果不指定生存有效時間，則cookie只在瀏覽器關閉前有效，cookie會在服務器端和客戶端傳輸，但是不會保存在客戶機的磁盤上，打開新的瀏覽器將不能獲得原先創建的cookie信息。
Cookie信息保存在本地時會保存到當前登錄用戶專門目錄下，保存的cookie文件名中會包含創建cookie所在頁面網站的域名，當瀏覽器再次連接該網站時，會從本機cookie存放目錄下選出該網站的有效cookie，將保存在其中的信息附加在HTTP消息頭中發送到服務器端，服務器端程序就可根據上次保存在cookie的信息為訪問客戶提供“記憶”或個性化服務。
Cookie除了可以在服務器端創建外，也可以在客戶端的瀏覽器中用客戶端腳本(如javascript)創建。客戶端創建的cookie的性質和服務器端創建的cookie一樣，可以保存在本地，也可以被傳送到服務器端被服務器程序讀取。
Cookie 基礎知識
cookie 是有大小限制的，大多數瀏覽器支持最大為 4096 字節的 Cookie(具體會有所差異，可以使用這個好用的工具: http://browsercookielimits.squawky.net/ 進行測試);如果 cookie 字符串的長度超過最大限制，則該屬性將返回空字符串。
由於 cookie 最終都是以文件形式存放在客戶端計算機中，所以查看和修改 cookie 都是很方便的，這就是為什麽常說 cookie 不能存放重要信息的原因。
每個 cookie 的格式都是這樣的：cookieName = Vaue；名稱和值都必須是合法的標示符。
cookie 是存在 有效期的。在默認情況下，一個 cookie 的生命周期就是在瀏覽器關閉的時候結束。如果想要 cookie 能在瀏覽器關掉之後還可以使用，就必須要為該 cookie 設置有效期，也就是 cookie 的失效日期。
alert(typeof document.cookie)結果是 string.
cookie 有域和路徑這個概念。域就是domain的概念，因為瀏覽器是個註意安全的環境，所以不同的域之間是不能互相訪問 cookie 的(當然可以通過特殊設置的達到 cookie 跨域訪問)。路徑就是routing的概念，一個網頁所創建的 cookie 只能被與這個網頁在同一目錄或子目錄下得所有網頁訪問，而不能被其他目錄下得網頁訪問（這句話有點繞，一會看個例子就好理解了）。
其實創建cookie的方式和定義變量的方式有些相似，都需要使用 cookie 名稱和 cookie 值。同個網站可以創建多個 cookie ，而多個 cookie 可以存放在同一個cookie 文件中。
cookie 存在兩種類型：①:你瀏覽的當前網站本身設置的 cookie ②來自在網頁上嵌入廣告或圖片等其他域來源的 第三方 cookie (網站可通過使用這些 cookie 跟蹤你的使用信息)
cookie 有兩種清除方式：①:通過瀏覽器工具清除 cookie (有第三方的工具，瀏覽器自身也有這種功能) ②通過設置 cookie 的有效期來清除 cookie. 註：刪除 cookie 有時可能導致某些網頁無法正常運行。
瀏覽器可以通過設置來接受和拒絕訪問 cookie。出於功能和性能的原因考慮，建議盡量降低 cookie 的使用數量，並且要盡量使用小 cookie。
Cookie的使用
從cookie的定義可以看到，cookie一般用於采用HTTP作為進行信息交換協議的客戶端和服務器端用於記錄需要持久化的信息。一般是由服務器端創建要記錄的信息，然後傳遞到客戶端，由客戶端從HTTP消息中取出信息，保存在本機磁盤上。當客戶端再次訪問服務器端時，從本機磁盤上讀出原來保存的信息，附加到HTTP消息中發送給服務器端，服務器端從HTTP消息中讀取信息，根據實際應用的需求進行進一步的處理。
服務器端cookie的創建和再次讀取功能通常由服務器端編程語言實現，客戶端cookie的保存、讀取一般由瀏覽器來提供，並且對cookie的安全性方面可以進行設置，如是否可以在本機保存cookie。
由於cookie信息以明文方式保存在文本文件中，對一些敏感信息如口令、銀行帳號如果要保存在本地cookie文件中，最好采用加密形式。
與cookie類似的另一個概念是會話（Session），會話一般是記錄客戶端和服務器端從客戶端瀏覽器連接上服務器端到關閉瀏覽器期間的持久信息。會話一般保存在內存中，不保存到磁盤上。會話可以通過cookie機制來實現，對於不支持cookie的客戶端，會話可以采用URL重寫方式來實現。可以將會話理解為內存中的cookie。
使用會話會對系統伸縮性造成負面影響，當服務器端要在很多臺服務器上同步復制會話對象時，系統性能會受到較大傷害，尤其會話對象較大時。這種情況下可以采用cookie，將需要記錄的信息保存在客戶端，每次請求時發送到服務器端，服務器端不保留狀態信息，避免在服務器端多臺機器上復制會話而造成的性能下降。
Cookie 基本操作
對於 Cookie 得常用操作有，存取，讀取，以及設置有效期；具體可以參照 JavaScript 操作 Cookie 一文；但，近期在前端編碼方面，皆以Vue為沖鋒利器，所以就有用到一款插件 vue-cookie,其代碼僅30行，堪稱精妙，讀取操作如下：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 | set: function (name, value, days) { var d = new Date; d.setTime(d.getTime() + 24*60*60*1000*days); window.document.cookie = name + "=" + value + ";path=/;expires=" + d.toGMTString(); }, get: function (name) { var v = window.document.cookie.match(‘(^|;) ?‘ + name + ‘=([^;]*)(;|$)‘); return v ? v[2] : null; }, delete: function (name) { this.set(name, ‘‘, -1); } |
cookie 域概念
路徑能解決在同一個域下訪問 cookie 的問題，咱們接著說 cookie 實現同域之間訪問的問題。語法如下：
document.cookie = “name=value;path=path;domain=domain“
紅色的domain就是設置的 cookie 域的值。例如 “www.qq.com” 與 “sports.qq.com” 公用一個關聯的域名”qq.com”，我們如果想讓”sports.qq.com” 下的cookie被 “www.qq.com” 訪問，我們就需要用到cookie 的domain屬性，並且需要把path屬性設置為 “/“。例：
document.cookie = “username=Darren;path=/;domain=qq.com“
註：一定的是同域之間的訪問，不能把domain的值設置成非主域的域名。
cookie 安全性
通常 cookie 信息都是使用HTTP連接傳遞數據，這種傳遞方式很容易被查看，在控制臺下運行document.cookie,一目了然；所以 cookie 存儲的信息容易被竊取。假如 cookie 中所傳遞的內容比較重要，那麽就要求使用加密的數據傳輸。所以 cookie 的這個屬性的名稱是“secure”，默認的值為空。如果一個 cookie 的屬性為secure，那麽它與服務器之間就通過HTTPS或者其它安全協議傳遞數據。語法如下：
document.cookie = “username=Darren;secure”
把cookie設置為secure，只保證 cookie 與服務器之間的數據傳輸過程加密，而保存在本地的 cookie文件並不加密。如果想讓本地cookie也加密，得自己加密數據。
註： 就算設置了secure 屬性也並不代表他人不能看到你機器本地保存的 cookie 信息，所以說到底，別把重要信息放cookie就對了。
Session詳解
Session即回話，指一種持續性的、雙向的連接。Session與Cookie在本質上沒有區別，都是針對HTTP協議的局限性而提出的一種保持客戶端和服務器間保持會話連接狀態的機制。Session也是一個通用的標準，但在不同的語言中實現有所不同。針對Web網站來說，Session指用戶在瀏覽某個網站時，從進入網站到瀏覽器關閉這段時間內的會話。由此可知，Session實際上是一個特定的時間概念。
使用Session可以在網站的上下文不同頁面間傳遞變量、用戶身份認證、程序狀態記錄等。常見的形式就是配合Cookie使用，實現保存用戶登錄狀態功能。和Cookie一樣，session_start() 必須在程序最開始執行，前面不能有任何輸出內容，否則會出現警告。PHP的Session默認通過文件的方式實現，即存儲在服務器端的Session文件，每個Session一個文件。
Session通過一個稱為PHPSESSID的Cookie和服務器聯系。Session是通過sessionID判斷客戶端用戶的，即Session文件的文件名。sessionID實際上是在客戶端和服務端之間通過HTTP Request 和 HTTP Response傳來傳去。sessionID按照一定的算法生成，必須包含在 HTTP Request 裏面，保證唯一性和隨機性，以確保Session的安全。如果沒有設置 Session 的生成周期， sessionID存儲在內存中，關閉瀏覽器後該ID自動註銷；重新請求該頁面，會重新註冊一個sessionID。如果客戶端沒有禁用Cookie，Cookie在啟動Session回話的時候扮演的是存儲sessionID 和 Session 生存期的角色。Session過期後，PHP會對其進行回收。
假設客戶端禁用Cookie，可以通過URL或者隱藏表單傳遞sessionID；php.ini中把session.use_trans_sid 設成1，那麽連接後就會自己加Session的ID。
Session以文件的形式存放在本地硬盤的一個目錄中，當比較多時，磁盤讀取文件就會比較慢，因此把Session分目錄存放。
對於訪問量大的站點，用默認的Session存儲方式並不適合，較優的方法是用Data Base存取Session。在大流量的網站中，Session入庫存在效率不高、占據數據庫connection資源等問題。針對這種情況，可以使用Memcached、Redis等Key-Value數據存儲方案實現高並發、大流量的Session存儲。
session與cookie的區別：
1，session 在服務器端，cookie 在客戶端（瀏覽器）
2，session 存在在服務器的一個文件裏（默認），不是內存
3，session 的運行依賴 session id，而 session id 是存在 cookie 中的，也就是說，如果 瀏覽器禁用了 cookie ，同時 session 也會失效（當然也可以在 url 中傳遞）
4，session 可以放在 文件，數據庫，或內存中都可以。
5，用戶驗證這種場合一般會用 session
因此，維持一個會話的核心就是客戶端的唯一標識，即 session id
更為詳盡的說法：
- 由於HTTP協議是無狀態的協議，所以服務端需要記錄用戶的狀態時，就需要用某種機制來識具體的用戶，這個機制就是Session.典型的場景比如購物車，當你點擊下單按鈕時，由於HTTP協議無狀態，所以並不知道是哪個用戶操作的，所以服務端要為特定的用戶創建了特定的Session，用用於標識這個用戶，並且跟蹤用戶，這樣才知道購物車裏面有幾本書。這個Session是保存在服務端的，有一個唯一標識。在服務端保存Session的方法很多，內存、數據庫、文件都有。集群的時候也要考慮Session的轉移，在大型的網站，一般會有專門的Session服務器集群，用來保存用戶會話，這個時候 Session 信息都是放在內存的，使用一些緩存服務比如Memcached之類的來放 Session。
- 思考一下服務端如何識別特定的客戶？這個時候Cookie就登場了。每次HTTP請求的時候，客戶端都會發送相應的Cookie信息到服務端。實際上大多數的應用都是用 Cookie 來實現Session跟蹤的，第一次創建Session的時候，服務端會在HTTP協議中告訴客戶端，需要在 Cookie 裏面記錄一個Session ID，以後每次請求把這個會話ID發送到服務器，我就知道你是誰了。有人問，如果客戶端的瀏覽器禁用了 Cookie 怎麽辦？一般這種情況下，會使用一種叫做URL重寫的技術來進行會話跟蹤，即每次HTTP交互，URL後面都會被附加上一個諸如 sid=xxxxx 這樣的參數，服務端據此來識別用戶。
- Cookie其實還可以用在一些方便用戶的場景下，設想你某次登陸過一個網站，下次登錄的時候不想再次輸入賬號了，怎麽辦？這個信息可以寫到Cookie裏面，訪問網站的時候，網站頁面的腳本可以讀取這個信息，就自動幫你把用戶名給填了，能夠方便一下用戶。這也是Cookie名稱的由來，給用戶的一點甜頭。
所以，總結一下：
Session是在服務端保存的一個數據結構，用來跟蹤用戶的狀態，這個數據可以保存在集群、數據庫、文件中；
Cookie是客戶端保存用戶信息的一種機制，用來記錄用戶的一些信息，也是實現Session的一種方式。
Cookie與Session問答
-
Cookie運行在客戶端，Session運行在服務端，對嗎？
A：不完全正確。Cookie是運行在客戶端，有客戶端進行管理；Session雖然是運行在服務器端，但是sessionID作為一個Cookie是存儲在客戶端的。 -
瀏覽器禁止Cookie，Cookie就不能用了，但Session不會受瀏覽器影響，對嗎？
A：錯。瀏覽器禁止Cookie，Cookie確實不能用了，Session會受瀏覽器端的影響。很簡單的實驗，在登錄一個網站後，清空瀏覽器的Cookie和隱私數據，單機後臺的連接，就會因為丟失Cookie而退出。當然，有辦法通過URL傳遞Session。 -
瀏覽器關閉後，Cookie和Session都消失了，對嗎？
A：錯。存儲在內存中額Cookie確實會隨著瀏覽器的關閉而消失，但存儲在硬盤上的不會。更頑固的是Flash Cookie，不過現在很多系統優化軟件和新版瀏覽器都已經支持刪除Flash Cookie。百度采用了這樣的技術記憶用戶：Session在瀏覽器關閉後也不會消失，除非正常退出，代碼中使用了顯示的unset刪除Session。否則Session可能被回收，也有可能永遠殘留在系統中。 -
Session 比 Cookie 更安全嗎？ 不應該大量使用Cookie嗎？
A：錯誤。Cookie確實可能存在一些不安全因素，但和JavaScript一樣，即使突破前端驗證，還有後端保障安全。一切都還要看設計，尤其是涉及提權的時候，特別需要註意。通常情況下，Cookie和Session是綁定的，獲得Cookie就相當於獲得了Session，客戶端把劫持的Cookie原封不動地傳給服務器，服務器收到後，原封不動地驗證Session，若Session存在，就實現了Cookie和Session的綁定過程。因此，不存在Session比Cookie更安全這種說法。如果說不安全，也是由於代碼不安全，錯誤地把用作身份驗證的Cookie作為權限驗證來使用。 -
Session是創建在服務器上的，應該少用Session而多用Cookie，對嗎？
A：錯。Cookie可以提高用戶體驗，但會加大網絡之間的數據傳輸量，應盡量在Cookie中僅保存必要的數據。 -
如果把別人機器上的Cookie文件復制到我的電腦上（假設使用相同的瀏覽器），是不是能夠登錄別人的帳號呢？如何防範？
A：是的。這屬於Cookie劫持的一種做法。要避免這種情況，需要在Cookie中針對IP、UA等加上特殊的校驗信息，然後和服務器端進行比對。 -
在IE瀏覽器下登錄某網站，換成Firefox瀏覽器是否仍然是未登錄狀態？使用IE登錄了騰訊網站後，為什麽使用Firefox能保持登錄狀態？
A：不同瀏覽器使用不同的Cookie管理機制，無法實現公用Cookie。如果使用IE登錄騰訊網站，使用Firefox也能登錄，這是由於在安裝騰訊QQ軟件時，你的電腦上同時安裝了針對這兩個瀏覽器的插件，可以識別本地已登錄QQ號碼進而自動登錄。本質上，不屬於共用Cookie的範疇。
詳解 Cookie 紀要（vue.cookie，jquery.cookie簡化）