JavaScript實作cookie的寫入、讀取、刪除功能_javascript技巧

在沒介紹正文之前，先跟大家介紹Cookie的基礎知識

先了解什麼是cookie

　　“cookie 是儲存於訪客的電腦中的變數。每當同一台電腦透過瀏覽器要求某個頁面時，就會發送這個cookie。你可以使用JavaScript 來建立和取回cookie 的值。”

cookie 是造訪過的網站所建立的文件，用於儲存瀏覽信息，例如個人資料資訊。

　　從JavaScript的角度看，cookie 就是一些字串資訊。這些資訊存放在客戶端的電腦中，用於客戶端電腦與伺服器之間傳遞訊息。

　　在JavaScript中可以透過 document.cookie 來讀取或設定這些資訊。由於 cookie 多用在客戶端和服務端之間進行通信，除了JavaScript以外，服務端的語言（如PHP）也可以存取 cookie。

Cookie 基礎知識

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

由於 cookie 最終都是以文件形式存放在客戶端電腦中，所以查看和修改 cookie 都是很方便的，這就是為什麼常說 cookie 不能存放重要資訊的原因。

每個 cookie 的格式都是這樣的：=；名稱和值都必須是合法的標示符。

cookie 是存在有效期限的。在預設情況下，一個 cookie 的生命週期就是在瀏覽器關閉的時候結束。如果想要 cookie 能在瀏覽器關掉之後還可以使用，就必須為該 cookie 設定有效期，也就是 cookie 的失效日期。

alert(typeof document.cookie)結果是 string，曾經我以為是array，還鬧過笑話...囧

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 有時可能會導致某些網頁無法正常運作

瀏覽器可以透過設定來接受和拒絕存取 cookie。

出於功能和效能的原因考慮，建議盡量降低 cookie 的使用數量，並且要盡量使用小 cookie。

關於cookie編碼的細節問題將會在cookie高級篇中單獨介紹。

假如是本機磁碟中的頁面，chrome的控制台是無法用JavaScript讀取寫入操作 cookie 的，解決方法...換一個瀏覽器^_^。

本章節分享幾段關於javascript對於cookie的簡單操作，例如對於cookie的寫入和刪除。

程式碼很簡單，比較適合對於cookie基本操作還不太熟練的朋友參考。

一.寫入cookie:

//两个参数，一个是cookie的名子，一个是值
function SetCookie(name,value){
 var Days = 30;//此 cookie 将被保存 30 天
 var exp = new Date();//new Date("December 31, 9998");
 exp.setTime(exp.getTime() + Days*24*60*60*1000);
 document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
}

二.讀取cookie:

//取cookies函数  
function getCookie(name){
 var arr = document.cookie.match(new RegExp("(^| )" + name + "=([^;]*)(;|$)"));
 if (arr != null) return unescape(arr[2]); return null;
}

三.刪除cookie:

//删除cookie
function delCookie(name){
 var exp = new Date();
 exp.setTime(exp.getTime() - 1);
 var cval = getCookie(name);
 if (cval != null) document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString();
}