JavaScript 建立與讀取cookie

admin發表於2019-08-05

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

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

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

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

一.寫入cookie:

cookie是以鍵值對形式存在。

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

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

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

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

a:3:{s:3:\"pic\";s:43:\"portal/201811/15/114939sf2ef2mqddfjlen6.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

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

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

語法結構如下:

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

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

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

程式碼如下:

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

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

a:3:{s:3:\"pic\";s:43:\"portal/201811/15/115058k8s8wq0yw0h8okmq.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

需要特別注意的一點是,上述程式碼是一個增量操作,不清空之前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一章節。

相關文章