JavaScript 建立與讀取cookie

關於cookie的基本知識可以參閱JavaScript cookie一章節。

cookie實質是儲存在計算機硬碟上一個文字檔案，內中儲存著一定量的資訊。

在實際應用中，站點可能會向使用者硬碟寫入cookie，也會根據需要讀取cookie。

下面通過程式碼例項介紹一下相關操作原理，並給出封裝好的程式碼。

一.寫入cookie：

cookie是以鍵值對形式存在。

下面看一下本站螞蟻部落cookie的儲存情況。

首先進入螞蟻部落首頁，然後開啟谷歌控制檯，輸入下面程式碼：

[JavaScript] 純文字檢視 複製程式碼
document.cookie

程式碼執行效果截圖如下：

可以看到cookie資訊是以鍵值對形式存在，鍵值對之間使用分號和空格分隔。

那麼存入的資訊也是鍵值對形式（空格和分號我們不用管，會自動完成）。

語法結構如下：

[JavaScript] 純文字檢視 複製程式碼
document.cookie="name=username";

上面程式碼是存入新的cookie資訊的大致語法格式。

假如我們要存入鍵為"antzone"，值為"螞蟻部落"的cookie資訊。

程式碼如下：

[JavaScript] 純文字檢視 複製程式碼
document.cookie="antzone=螞蟻部落"

下面再來看一下螞蟻部落的cookie資訊，截圖如下：

需要特別注意的一點是，上述程式碼是一個增量操作，不清空之前cookie資訊，而是在尾部追加。

當然如果鍵名相同，那麼會更新相關資訊。

程式碼封裝如下：

[JavaScript] 純文字檢視 複製程式碼
//三個引數，cookie的名字，cookie值和cookie過期時間
function SetCookie(name,value,date){
  let Days = date;//此 cookie 將被儲存的天數
  let exp  = new Date();//建立一個時間日期物件;
  exp.setTime(exp.getTime() + Days*24*60*60*1000);
  document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
}

上面程式碼可以新增一個cookie，並設定它的過期時間。

二.讀取cookie：

實際應用中，可能需要獲取指定名稱（鍵）的cookie值。

那麼可以利用document.cookie獲取當前域下所有的cookie資訊，然後再從中篩選指定鍵的資訊。

程式碼如下：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
//取cookies函式        
function getCookie(name){
  let arr = document.cookie.match(new RegExp("(^| )" + name + "=([^;]*)(;|$)"));
  if (arr != null) return unescape(arr[2]); 
  return null;
}

上面程式碼利用正規表示式篩選出鍵名為name的cookie值。

關於刪除cookie的操作可以參閱JavaScript 刪除cookie一章節。