JavaScript 存取 Cookie

Cookie 在 JavaScript 中可以使用语法来设定，将少量的资料合法写在浏览用户端之电脑档案内，然后存在浏览者(用户端)的电脑中，Cookie 是一个独立档案，存放于例如 Temporary Internet Files 这资料夹内。之后再让网页系统取得 Cookie 的值自动填入或判断。Cookies 可以运用如使用者名称，密码或是日期等等之记录。

并且能在 Cookie 中设定有效时间，即时间过后则失效，增加网页互动下的资料存取方便。应用上可以如登录网站时，网站请求用户输入用户名和密码，并且用户可以勾选「下次自动登录」。如果勾选了，于下次访问网站时，用户不用再输入用户名和密码就可以自动登录网站。

Cookie domain

例如于 //www.zhangleiboke.com/Blogger/User/login.html 该页中建立 Cookie，同时把 path=/ 并且 domain=eion.com.tw，则所有在 eion.com.tw 网域的 WWW 站台（如 store.eion.com.tw）都可以读取此 cookie。

Cookie path

设定可读取 Cookie 的最上层目录。若设定 path=/Blogger 则网页 //www.zhangleiboke.com/Blogger/Store/Product.html 就可以读取此 Cookie。若设定 path=/ 则网站 //www.zhangleiboke.com/ 所有网页中均可以读取此 Cookie。

Cookie 在预设隐私的规则下 Cookie 只能被设定网页的「目录」与其「子目录」中的其他网页所读取。例如网页 //www.zhangleiboke.com/Blogger/User/login.html 建立了一个 Cookie。
则此 Cookie 可以被 //www.zhangleiboke.com/Blogger/User/mail.html 或 //www.zhangleiboke.com/Blogger/User/Textually/article.html 所读取，但不能被 //www.zhangleiboke.com/Blogger/Store/Product.html 所读取。也就是可读取此 Cookie 的最上层目录为 /Blogger/User。

Cookie HttpOnly

Cookie 设置 HttpOnly 的属性则不能使用 JavaScript 经由 Document.cookie 属性、XMLHttpRequest 和 Request API 进行访问，以防范跨站脚本 XSS 攻击。

Cookie SameSite 的限制

SameSite 必须加入 Secure Flag 加强资料的保护。在新版本浏览器中，Lax：为预设选项 Same-site cookies 将会为一些跨站子请求保留，如图片加载或者 frames 的调用，但只有当用户从外部站点导航到 URL 时才会发送。
Strict 为严格方式，可以禁止第三方 Cookie 跨站点时的情况下都不会发送 Cookie。只有在当前网页 URL 与请求网址的目标一致，才会读取 Cookie 内的记录以确保安全。

JavaScript Cookie 是在浏览器端储存资料的机制，可以用来记录使用者的偏好、身份或其他状态。JavaScript 存取 Cookie 的使用已经不再符合当前的需求和标准，建议使用 Web Storage API 或 IndexedDB API 来替代它们，以提高网站的效能和安全性。Web Storage API 包括 localStorage 和 sessionStorage 两种类型，分别用来储存永久性和临时性的资料。它们都是以键值对的形式储存资料，并且提供方便的方法来设定或取得资料。

JavaScript Cookie 的使用方式

设定 Set cookie

function doCookieSetup(name, value) {
  const 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) {
  let arg = escape(name) + "=";
  let nameLen = arg.length;
  let cookieLen = document.cookie.length;
  let i = 0;
  while (i & lt; cookieLen) {
    let 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) {
  let 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) {
  let exp = new Date();
  exp.setTime(exp.getTime() - 1);
  let 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：

<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：

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

列出全部 Cookie 值

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

<script>
listCookie();
</script>