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

嗯哼9925發表於2017-11-07

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

　　那就從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

1 document.cookie  = `username=木子Vs立青`

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

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

　　2.maxAge

1 var date = new Date();
2 
3 date.setDate(date.getDate()+30);
4 date.toGMTString();
5 
6 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

1 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

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

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

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

　　你應該懂了~

　　5.secure

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

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

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

Attention [注意事項]

　　1.value值保護

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

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

　　2.重要資訊就不要放到cookie值中了~

Class [封裝cookie方法的類]

　　1、建立Cookie物件

1 //因為是作為類名或者名稱空間的使用，所以和Math物件類似，這裡使用Cookie來表示該物件
2 var Cookie = new Object();

　　2、實現設定Cookie的方法

 1 //name是要設定cookie的名稱；value是設定cookie的值，option包括了其它選項，是一個物件作為引數
 2 Cookie.setCookie = function(name, value, option) {
 3   //用於儲存賦值給document.cookie的cookie格式字串
 4   var str = name+"="+escape(value);
 5   if(option) {
 6     //如果設定了過期時間
 7      if(option.expireDays) {
 8       var date = new date();
 9       var ms = option.expireDays*24*3600*1000;
10       date.setTime(date.getTime()+ms);
11       str += "; expires="+date.toGMTString();
12     }
13     if(option.path) str += "; path="+path;//設定訪問路徑
14      if(option.domain) str += "; domain="+domain;//設定訪問主機
15      if(option.secure) str += "; true";//設定安全性
16   }
17   document.cookie = str;
18 }

　　3、實現取Cookie的方法

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

　　4、實現刪除Cookie的方法

 1 //name是指定cookie的名稱，從而根據這個名稱刪除相應的cookie。在實現中，刪除cookie是通過呼叫setCookie來完成的，將option的expireDays屬性指定為負數即可
 2 Cookie.deleteCookie = function(name) {
 3   this.setCookie(name, "", {expireDays:-1});//將過期時間設定為過去來刪除一個cookie
 4 }
 5 //通過下面的程式碼，整個Cookie物件建立完畢後，可以將其放到一個大括號中來定義：
 6 var Cookie = {
 7    setCookie:function(){},
 8    getCookie:function(){},
 9    deleteCookie:function(){}
10 }
11 
12 //通過這種形式，可以讓Cookie的功能更加清晰，它作為一個全域性物件，大大方便了對Cookie的操作
13 Cookie.setCookie("user", "terry");
14 Cookie.deleteCookie("user");