JavaScript 設定cookie 過期時間

專案中，使用cookie儲存一些安全性要求低，且量較小的資料是一個不錯的選擇。

比如比較典型的，記憶使用者名稱和密碼，或者保持使用者喜愛的頁面風格等。

通常要給cookie設定一個過期時間，下面將對其做一下詳細介紹。

一.cookie儲存方式：

伺服器傳送到瀏覽器的cookie存在兩種儲存方式：

（1）.如果設定過期時間，那麼cookie將儲存在本地硬碟，過期會自動刪除。

（2）.如果不設定過期時間，那麼cookie存在於計算機記憶體中，當會話結束或者關閉瀏覽器視窗，將刪除cookie。

二.設定過期時間：

cookie具有兩個屬性可以規定cookie的過期時間。

（1）.通過Expires屬性設定過期時間：

可以通過響應頭設定cookie的過期時間，程式碼如下：

[JavaScript] 純文字檢視 複製程式碼
Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT;

作者比較懶，上述程式碼來自於MDN，Expires時間是UTC 格式。

UTC格式可以通過Date物件的toUTCString()轉換。

當然我們可以通過JavaScript來設定Expires屬性，程式碼如下：

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

date也是UTC格式，下面是一個可以設定cookie立馬過期的程式碼：

[JavaScript] 純文字檢視 複製程式碼
//取cookies     
function getCookie(name){
  let arr = document.cookie.match(new RegExp("(^| )" + name + "=([^;]*)(;|$)"));
  if (arr != null) return unescape(arr[2]); 
  return null;
}
//刪除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();
}

（2）.通過Max-Age屬性設定過期時間：

通過Max-Age同樣可以設定cookie的過期時間。

Max-Age屬性值是一個數字，單位是秒，用來指定cookie從現在開始存在的秒數。

超過這個這個秒數，那麼cookie立馬過期；如果同時設定Max-Age與Expires，那麼Max-Age優先順序更高。

下面看一段利用此屬性封裝的設定cookie過期時間的程式碼：

[JavaScript] 純文字檢視 複製程式碼
function setcookie(name, value, daysTolive) {
  let cookie = name + "=" + encodeURIComponent(value);
  if (typeof daysTolive === "number")
    cookie += "; max-age =" + (daysTolive * 60 * 60 * 24);
  document.cookie = cookie;
}
setcookie("ant","螞蟻部落",0);

程式碼分析如下：

（1）.函式第一個引數是cookie名稱。

（2）.函式第二個引數是cookie的值。

（3）.函式第三個引數是一個數字，規定多少天后過期，60 * 60 * 24表示24小時。

（4）.如果第三個引數設定為0，則表示設定當前cookie立即過期。

三.過期時間依據本地時間：

cookie的過期時間是依據瀏覽器所在的計算機本地時間，這一點需要特別注意。

所以雖然在伺服器設定了一個過期時間，但是在本地可能並不能達到要求。

比如在伺服器設定在3年後過期，如果將本地時間手動時間調整到三年後，那麼此cookie會立馬過期。

關於cookie的更多內容可以參閱其他相關章節。