JavaScript 存取 Cookie

Cookie 在 JavaScript 中可以使用語法來設定，將少量的資料寫在一個檔案內，然後存在觀看者(用戶端)的電腦中，Cookie 是一個獨立檔案，存放於例如 Temporary Internet Files 這資料夾內。讓我們建立並且取得 Cookie 的值。 Cookies 可以運用如使用者名稱，密碼或是日期等等之記錄。

並且能在 Cookie 中設定有效時間，即時間過後則失效，增加網頁互動下的資料存取方便。應用上可以如登錄網站時，網站請求用戶輸入用戶名和密碼，並且用戶可以勾選「下次自動登錄」。如果勾選了，於下次訪問網站時，用戶不用再輸入用戶名和密碼就可以自動登錄網站了。

Cookies SameSite 的限制

SameSite 必須加入 Secure Flag 加強資料的保護。Lax：在新版本瀏覽器中，為預設選項 Same-site cookies 將會為一些跨站子請求保留，如圖片加載或者 frames 的調用，但只有當用戶從外部站點導航到 URL 時才會發送。

Strict 為嚴格，完全禁止第三方 Cookie 跨站點時，任何情況下都不會發送 Cookie。只有在當前網頁的 URL 與請求目標一致，才會帶上 Cookie。

JavaScript Cookie 的文法

設定 Set cookie

function doCookieSetup(name, value) {
  var expires = new Date();
  //有效時間保存 2 天 = 2 * 24 * 60 * 60 * 1000
  expires.setTime(expires.getTime() + 172800000);
  document.cookie = name + "=" + escape(value) + ";SameSite=Strict;expires=" + expires.toGMTString()
}

查詢 Get cookie by name

function getCookie(name) {
  var arg = escape(name) + "=";
  var nameLen = arg.length;
  var cookieLen = document.cookie.length;
  var i = 0;
  while (i & lt; cookieLen) {
    var j = i + nameLen;
    if (document.cookie.substring(i, j) == arg) return getCookieValueByIndex(j);
    i = document.cookie.indexOf(" ", i) + 1;
    if (i == 0) break;
  }
  return null;
}

function getCookieValueByIndex(startIndex) {
  var endIndex = document.cookie.indexOf(";", startIndex);
  if (endIndex == -1) endIndex = document.cookie.length;
  return unescape(document.cookie.substring(startIndex, endIndex));
}

刪除 Delete cookie entry

function delCookie(name) {
  var exp = new Date();
  exp.setTime(exp.getTime() - 1);
  var cval = getCookie(name);
  document.cookie = escape(name) + "=" + cval + ";SameSite=Strict;expires=" + exp.toGMTString();
}

Html 的文法

設定 Cookie：

<form>
  Cookie Name: <input name="cName" type="text" /> 
  Cookie Value: <input name="cValue" type="text" />
  <input onclick="doCookieSetup(this.form.cName.value, this.form.cValue.value)"
  type="button" value="設定" />
</form>

Cookie Name :

Cookie Value :

查詢 Cookie：

<form>
  Cookie Name: <input name="cName" type="text" /> 
  Cookie Value: <input name="cValue" type="text" />
  <input onclick="this.form.cValue.value=getCookie(this.form.cName.value)"
  type="button" value="查詢" />
</form>

Cookie Name :

Cookie Value :

刪除 Cookie：

<form>
  Cookie Name: <input name="cName" type="text" />
  <input onclick="delCookie(this.form.cName.value)" type="button" value="移除" />
</form>

Cookie Name :

列出全部 Cookie 值

function listCookie() {
  document.writeln("<table>");
  document.writeln("<tr><th>Name<th>Value");
  cookieArray = document.cookie.split(";");
  for (var i = 0; i < cookieArray.length; i++) {
    thisCookie = cookieArray[i].split("=");
    cName = unescape(thisCookie[0]);
    cValue = unescape(thisCookie[1]);
    document.writeln("<tr><td>" + cName + "</td><td>" + cValue + "</td>");
  }
  document.writeln("</table>");
}

<script>
listCookie();
</script>