JavaScript本地儲存（1）：cookie在前端

　　以前心里總是默念着這句：“知道資源在哪兒就是成功的一半”。對於很多知識的學習，好像也一直停留在知道它在哪兒的地步，看來現在需要有所改變了！

　　那就從cookie開始吧~

　　Cookie（復數形態Cookies），中文名稱為小型文本文件或小甜餅，指某些網站為了辨別用戶身份、進行session跟蹤而儲存在用戶本地終端（Client Side）上的數據（通常經過加密）。定義於RFC2109（已廢棄），最新取代的規范是RFC2965。

Clasification [分類]

　　說到底，cookie就是保存在客戶端的一段字符串（注意：不是數組）。

　　cookie可以手動設置，也可以由服務器產生，當客戶端（瀏覽器）向服務器發送請求，服務器會反饋一些信息給客戶端，這些信息的key/value值被瀏覽器作為文件保存在客戶端特定的文件夾中。

　　1.內存Cookie

　　　　內存Cookie由瀏覽器維護，保存在內存中，瀏覽器關閉后就消失了，其存在時間是短暫的。

　　2.磁盤Cookie

 　　　 硬盤Cookie保存在硬盤里，有一個過期時間，除非用戶手工清理或到了過期時間，硬盤Cookie不會被刪除，其存在時間是長期的。

 

Arguments [參數]

屬  性  名	描    述
String name	該Cookie的名稱。Cookie一旦創建，名稱便不可更改
Object value	該Cookie的值。如果值為Unicode字符，需要為字符編碼。如果值為二進制數據，則需要使用BASE64編碼
int maxAge	該Cookie失效的時間，單位秒。如果為正數，則該Cookie在maxAge秒之后失效。如果為負數，該Cookie為臨時Cookie，關閉瀏覽器即失效，瀏覽器也不會以任何形式保存該Cookie。如果為0，表示刪除該Cookie。默認為–1
boolean secure	該Cookie是否僅被使用安全協議傳輸。安全協議。安全協議有HTTPS，SSL等，在網絡上傳輸數據之前先將數據加密。默認為false
String path	該Cookie的使用路徑。如果設置為“/sessionWeb/”，則只有contextPath為“/sessionWeb”的程序可以訪問該Cookie。如果設置為“/”，則本域名下contextPath都可以訪問該Cookie。注意最后一個字符必須為“/”
String domain	可以訪問該Cookie的域名。如果設置為“.google.com”，則所有以“google.com”結尾的域名都可以訪問該Cookie。注意第一個字符必須為“.”
String comment	該Cookie的用處說明。瀏覽器顯示Cookie信息的時候顯示該說明
int version	該Cookie使用的版本號。0表示遵循Netscape的Cookie規范，1表示遵循W3C的RFC 2109規范

 

Detail [參數詳解]

　　1。key/value

document.cookie  = 'username=木子Vs立青'

　　很簡單吧，cookie是document的一個屬性，在控制台，console.log(document.cookie)可以看到該域名下的cookie值。設置方式就是key=value.

　　如何已經存在了username這個key，再次如上操作就是修改value值了。

　　2.maxAge

var date = new Date();

date.setDate(date.getDate()+30);
date.toGMTString();

document.cookie = "name=value;expires=date"

　　expires這個參數是用來設置cookie有效期的，如果將expires設置成一個過去的時間（相對本機系統時間），相應的cookie就被刪除，當然也可以手動來刪除cookie~

　　上面給出的例子是以天為單位計算的，如果要改成其他的計時方式，可以修改第三行date.setDate(date.getDate()+30)，為30天。比如要改成按小時計算：date.setHours(date.getHours()+30)，為30小時。

　　3.path

document.cookie = "name=value;expires=date;path=path"

 　　這里的path如何理解？比如在http://www.cnblogs.com/hustskyking/下創建一個cookie（即path=/hustskyking/），那么在http://www.cnblogs.com/hustskyking/下所有子目錄都是可以訪問這個cookie的；再比如path=/，意思就是在http://www.cnblogs.com/下的任何子目錄都是訪問到這個cookie的。

　　4.domain

document.cookie = "name=value;path=path;expires=date;domain=domain"

　　這里要說的是同域訪問，比如在a.example.com和b.example.com下共享c.example.com下的cookie文件，只需如此這般...

document.cookie = "name=value;path=path;expires=date;domain=example.com"

　　你應該懂了~

　　5.secure

 　　我們知道在網絡中建立連接傳輸數據有兩種常見的方式，一個鍾是http，另一種是https，后者是加密傳輸。大家從上面也可以看出，cookie很容易被竊取，通過下面這個方式可以為cookie加一把安全鎖。

document.cookie = "username=木子Vs立青;secure"

　　加了secure（默認值為空），之后，cookie提交到服務器時使用的是https傳輸。當然這只是加了一層防護，不等於我愛羅的絕對防御~

 

Attention [注意事項]

　　1.value值保護

document.cookie = name + "="+ escape (value);

　　我們通常會用escape將value進行編碼，取回的時候用unescape()函數就行了。

　　2.重要信息就不要放到cookie值中了~

 

Class [封裝cookie方法的類]

　　1、創建Cookie對象

//因為是作為類名或者命名空間的使用，所以和Math對象類似，這里使用Cookie來表示該對象
var Cookie = new Object();

　　2、實現設置Cookie的方法

//name是要設置cookie的名稱；value是設置cookie的值，option包括了其它選項，是一個對象作為參數
Cookie.setCookie = function(name, value, option) {
  //用於存儲賦值給document.cookie的cookie格式字符串
  var str = name+"="+escape(value);
  if(option) {
    //如果設置了過期時間
     if(option.expireDays) {
      var date = new date();
      var ms = option.expireDays*24*3600*1000;
      date.setTime(date.getTime()+ms);
      str += "; expires="+date.toGMTString();
    }
    if(option.path) str += "; path="+path;//設置訪問路徑
     if(option.domain) str += "; domain="+domain;//設置訪問主機
     if(option.secure) str += "; true";//設置安全性
  }
  document.cookie = str;
}

　　3、實現取Cookie的方法

//name是指定cookie的名稱，從而根據名稱返回相應的值
Cookie.getCookie = function(name) {
  var cookieArray = document.cookie.split("; ");//得到分割的cookie名值對
  var cookie = new Object();
  for(var i=0; i<cookieArray.length; i++) {
    var arr = cookieArray[i].split("=");//將名和值分開
     if(arr[0]==name) return unescape(arr[1]);//如果是指定的cookie，則返回它的值
  }
  return "";
}

　　4、實現刪除Cookie的方法

//name是指定cookie的名稱，從而根據這個名稱刪除相應的cookie。在實現中，刪除cookie是通過調用setCookie來完成的，將option的expireDays屬性指定為負數即可
Cookie.deleteCookie = function(name) {
  this.setCookie(name, "", {expireDays:-1});//將過期時間設置為過去來刪除一個cookie
}
//通過下面的代碼，整個Cookie對象創建完畢后，可以將其放到一個大括號中來定義：
var Cookie = {
   setCookie:function(){},
   getCookie:function(){},
   deleteCookie:function(){}
}

//通過這種形式，可以讓Cookie的功能更加清晰，它作為一個全局對象，大大方便了對Cookie的操作
Cookie.setCookie("user", "terry");
Cookie.deleteCookie("user");

 

Substitution [cookie的替代品]

　　cookie 是有大小限制的，每個 cookie 所存放的數據不能超過4kb，如果 cookie 字符串的長度超過4kb，則該屬性將返回空字符串。

　　如果我們需要在客戶端儲存比較大容量的數據，怎么辦？選擇cookie肯定是不明智的，下次會給大家詳細說明userData和localStorage。

　　userData(windows+IE平台): 128Kb

　　localStorage(現代瀏覽器):  5M

 

 Related blog [相關博文]

　　JavaScript本地儲存（2）：userData和localStorage

　　Javascript本地儲存（3）：離線web應用

 

Reference [參考資料]

　　1.百度文庫

　　2.wiki

　　3.聶微東博客

　　4.alixixi