JavaScript Cookie

在說cookie以前，先來看兩個例子。

例子 1：若是常常上網，會發現不少網站都有一個功能，下次自動登陸，或者一個月內免登陸，只要咱們不點擊「退出」按鈕，一段時間後再回到該網站，發現依然在線。這個功能很實用，避免了屢次登陸帶來的不便。

例子 2：目前的互聯網，不少網站都是靠百度聯盟和谷歌聯盟的廣告來盈利，細心地朋友可能會發現，這些廣告都有跟蹤功能，咱們須要什麼服務就顯示什麼廣告。好比，你正在準備考研，在百度搜索了不少與考研有關的信息，瀏覽了不少與考研有關的網站，當你再次瀏覽一個與考研無關的網站時，這個網站上顯示的倒是考研的廣告，咱們很驚訝的發現，百度太聰明瞭。

這兩個例子是常常見到的，都是 cookie 在發揮做用。沒有 cookie ，這些功能實現起來很困難，甚至沒法實現。

什麼是 cookie

有時候，服務器須要保存用戶的信息，這些信息最好放在用戶的電腦上，並可以讓服務器獲取。例如自動登陸功能的實現，須要將用戶名和密碼保存在本地，下次訪問網站時，再將用戶名和密碼發送到服務器進行驗證，驗證經過後自動登陸，不然不能登陸。

這些服務器在用戶電腦上保存的信息，就叫 cookie 。

cookie 保存在用戶的電腦上，當再次訪問相應網站時，瀏覽器會把 cookie 一塊兒發送到服務器，讓服務器進行處理。

cookie 能夠由服務器端程序（PHP、ASP、JSP、Python）生成，也能夠由客戶端腳本（JavaScript）生成。服務器生成的 cookie 會添加到 http 報頭，隨 http 請求發送給瀏覽器，瀏覽器再把它保存成本地的文件；JavaScript生成的 cookie 直接由瀏覽器保存在本地文件。

cookie 也是隨 http 請求發送給服務器的，當瀏覽器發送 http 請求時，會將 cookie 添加到 http 請求的報頭髮送到服務器，再由服務器進行處理。

爲何須要 cookie

HTTP協議是無狀態的，對於一個瀏覽器發出的屢次請求，服務器沒法區分是否是來源於同一個瀏覽器，須要額外的數據來辨認，cookie 正是這樣的一段隨HTTP請求一塊兒被傳遞的額外數據。

cookie能作什麼

cookie 只是一段文本，因此它只能保存字符串。並且瀏覽器對它有大小限制以及 它會 隨着每次請求被髮送到服務器，因此應該保證它不要太大。 Cookie的內容也是明文保存的，有些瀏覽器提供界面修改，因此， 不適合保存重要的或者涉及隱私的內容。

cookie 的限制

大多數瀏覽器支持最大爲 4096 字節的 Cookie。 因爲這限制了 Cookie 的大小，最好用 Cookie 來存儲少許數據，或者存儲用戶 ID 之類的標識符。用戶 ID 隨後即可用於標識用戶，以及從數據庫或其餘數據源中讀取用戶信息。 瀏覽器還限制網站能夠在用戶計算機上存儲的 Cookie 的數量。 大多數瀏覽器只容許每一個網站存儲 20 個 Cookie；若是試圖存儲更多 Cookie，則最舊的 Cookie 便會被丟棄。有些瀏覽器還會對它們將接受的來自全部站點的 Cookie 總數做出絕對限制，一般爲 300 個。

cookie 的形式

cookie 是以 鍵/值 對的形式存在的，每一個「 變量 」對應一個值，相互之間以分號隔開，以下所示：
username=itxueyuan;password=123456;age=22

總結：cookie一般用來保存服務器的信息（或者說維持會話），由服務端程序或者JavaScript腳本寫入，在後續請求中，供服務器讀取。

修改和刪除cookie

 JavaScript 經過 document.cookie 來修改和刪除 cookie 。

JavaScript 在設置 cookie 時會遵循這樣一條原則：新設置的 cookie 若是與原有的 cookie 相同（名稱、路徑和域名都相同），會將原有的 cookie 覆蓋（採用新 cookie） 。

這就給咱們提供了一種修改和刪除 cookie 的方法——直接覆蓋原有的 cookie 。

例如，有這樣一個 cookie：
username=itxueyuan;expire=1369929124191;path=/;domain=www.itxueyuan.org
將用戶名修改成「JavaScript」，並設置一天後過時：

var date=new Date();
var cookieExpire=date.getTime()+24*3600*1000;
// 修改 cookie 時，名稱、路徑和域名必須相同
document.cookie=" username=JavaScript  ; expire= "
     + cookieExpire + " ;path=/;domain=www.itxueyuan.org ";

刪除該cookie

var date=new Date();
var cookieExpire=date.getTime()-1000; // 設置爲一個過去的時間/
/ 刪除 cookie 時，名稱、路徑和域名必須相同
document.cookie=" username=JavaScript  ; expire= " 
    + cookieExpire + " ;path=/;domain=www.itxueyuan.org ";

注：爲了刪除一個cookie，能夠將其過時時間設定爲一個過去的時間

JavaScript設置cookie

在JavaScript中，使用 document.cookie 來設置 cookie 。

語法：
      document.cookie=" name=value ; expire=GMT_String ; path=cookieDir ; domain=cookieDomain "
對cookie格式的說明

鍵/值 對	說明
name=value	必需。設置cookie的名稱和值，一次只能設置一個。 在cookie的名稱或值中不會出現分號( ; )、逗號( , )、等號( = )、空格以及中文等，不然將會被瀏覽器編碼。在cookie的名稱中作到這點很容易（名稱通常是開發人員設定好的），可是保存的值是不肯定的，如何來存儲這些值呢？方法是用escape()函數進行編碼，它能將一些特殊符號使用十六進制表示，例如空格將會編碼爲「20%」，從而能夠存儲於cookie值 中，並且使用此種方案還能夠避免中文亂碼的出現。 例如，將「小明」存入cookie： document.cookie="username="+eacape("小明");
expire=GMT_String	可選。設置cookie的過時時間。 默認狀況下（不設置expire），用戶關閉瀏覽器時會銷燬cookie，這些cookie僅僅是存儲在內存中，而沒有創建相應的硬盤文件。在實際開發中，cookie 一般須要長期保存，例如保存用戶登陸的狀態，能夠經過設置 cookie 的過時時間來實現。 過時時間是以GMT格式表示的時間字符串，超過這個時間，cookie將消失，不可訪問。 例如，若是要將cookie設置爲10天后過時： var date=new Date();  //  更多請參考 JavaScript Date 對象 var expireDays=10; date.setTime(date.getTime()+expireDays*24*3600*1000);
path=cookieDir	可選。設置cookie的有效路徑。 默認狀況下（不設置path），cookie只在當前路徑下有效，路徑範圍以外不能訪問該cookie。例如，在 /javascript/jiaocheng/ 路徑下設置的cookie，只能被 /javascript/jiaocheng/ 路徑下的文件以及子目錄下的文件訪問。 要使 cookie 全站有效，請設置 path=/ 。
domain=cookieDomain	可選。設置cookie的有效域名。 默認狀況下（不設置 domain），cookie 只在當前域名下有效。例如，在 demo.itxueyuan.org 下設置的 cookie ，不能在 javascript.itxueyuan.org 域名下訪問。 要使 cookie 在 itxueyuan.org 的全部二級域名和主域名下都有效，請設置domain=.itxueyuan.org

請看下面幾個設置 cookie 的例子。

最簡單的 cookie 設置：

document.cookie=" name=xiaoming ";

對 cookie 的值進行 escape() 編碼：

var cookieValue=" 小明 ";
document.cookie=" name= "+escape(cookieValue) ;

設置有效路徑爲全站有效：

document.cookie=" name=xiaoming ; path=/ ";

設置過時時間爲 1 天：

var date=new Date(); // 建立日期對象
var cookieExpire=date.getTime()+24*3600*1000; // 以微妙計算document.cookie=" name=xiaoming ; expire= "+cookieExpire;

舉例，將IT學院會員的用戶名和密碼保存到cookie，過時時間一個月，全站有效，全部域名有效：

var username="小明";
var password="123456";
var expire=(new Date()).getTime()+1000*3600*24*30;
document.cookie = " username=" + escape(username) 
    + " expire=" +    expire + " ; path=/ ; domain=.itxueyuan.org ";
document.cookie = " password=" + escape(password) 
    + " expire=" +   expire + " ; path=/ ; domain=.itxueyuan.org ";

JavaScript獲取cookie

JavaScript 經過 document.cookie 來獲取 cookie 。

遺憾的是，document.cookie 只能獲取全部 cookie 的集合，不能獲取單個 cookie 。

例如，獲取當前cookie集合：

<input id="demo1" type="button" value="獲取cookie" />
<script type="text/javascript">
  document.getElementById("demo1").onclick=function(){
    alert(document.cookie);
  }
</script>

咱們能夠自定義一個函數來獲取單個 cookie 的值。

咱們知道，cookie 集合的格式是這樣的：
name1=value1 ; name2=value2 ; name3=value3 ; ...
將 cookie 以分號（;）分組，再以等號（=）分組，就能獲得每一個 cookie 的名稱和值。

/** *  func  getCookie()  獲取單個cookie的值 *  pram  cookieName  cookie的名稱**/
function getCookie(cookieName){
  var cookieObj={},cookieSplit=[],// 以分號（;）分組      cookieArr=document.cookie.split(";");
  for(var i=0,len=cookieArr.length;i<len;i++)
   if(cookieArr[i]) {// 以等號（=）分組
    cookieSplit=cookieArr[i].split("=");
    // Trim() 是自定義的函數，用來刪除字符串兩邊的空格
    cookieObj[cookieSplit[0].Trim()]=cookieSplit[1].Trim();
   }
   return cookieObj[cookieName];
}

例如，獲取 name 的值：

getCookie["name"];

對上面的代碼稍做修改，就可將 cookie 的值保存爲對象的屬性，使用時很是方便。代碼以下：

/** *  func  getCookieObj()  獲取全部cookie的值並將其保存爲對象的屬性**/
function getCookieObj(){
  var cookieObj={},cookieSplit=[],          // 以分號（;）分組
  cookieArr=document.cookie.split(";");
  for(var i=0,len=cookieArr.length;i<len;i++)
    if(cookieArr[i]) {            // 以等號（=）分組
       cookieSplit=cookieArr[i].split("=");            
     // Trim() 是自定義的函數，用來刪除字符串兩邊的空格
      cookieObj[cookieSplit[0].Trim()]=cookieSplit[1].Trim();
    }
  return cookieObj;
}

例如，獲取 name 的值：

var cookieObj=getCookieObj();
cookieObj.name;