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:
<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.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>