JavaScript 操作瀏覽器 Cookie 範例教學與 API 工具

這裡介紹如何使用 JavaScript 管理瀏覽器的 cookie，並且提供範例教學以及簡單易上手的 API 工具。

瀏覽器的 cookie 可以讓網頁的 JavaScript 程式將少量的資料儲存起來，最常用於儲存網頁的設定值與一些程式 session 相關的資料。

使用 JavaScript 控制 cookie

我們可以在 JavaScript 中直接取得瀏覽器所儲存的 cookie 值：

allCookies = document.cookie;

也可以寫入新的 cookie（或是更新 cookie 值）：

document.cookie = newCookie;

這裡的 newCookie 是一個 key=value 格式的字串，這樣的方式一次只能新增或是更新一個 cookie 值。

在寫入 cookie 時的 key=value 字串，還可以加上以下幾種字串來進行一些設定：

;path=path

設定 cookie 路徑，例如 ;path=/my_path，預設為目前的網頁路徑。

;domain=domain

設定 cookie 的網域，例如 ;domain=gtwang.org，預設為目前的網址上的網域。

;max-age=max-age-in-seconds

設定 cookie 的使用期限，單位為秒，例如 60*60*24 就是一天。

;expires=date-in-GMTString-format

設定 cookie 的使用期限，格式請參考 Date.toUTCString()，這個參數在 HTTP 1.1 之後已經被 max-age 取代。

;secure

設定 cookie 只能於加密的連線中傳送。

cookie 使用範例

Hello World

document.cookie = "name=oeschger";
document.cookie = "favorite_food=tripe";
function alertCookie() {
  alert(document.cookie);
}

在 HTML 中加入一個按鈕，用來顯示所有的 cookie：

<button >alertCookie()">Show cookies</button>

請點擊下面這個按鈕進行測試：

讀取 cookie 中的變數

這是從 cookie 讀取變數的範例：

document.cookie = "test1=Hello";
document.cookie = "test2=World";
var cookieValue = document.cookie.replace(/(?:(?:^|.*;\s*)test2\s*\=\s*([^;]*).*$)|^.*$/, "$1");
function alertCookieValue() {
  alert(cookieValue);
}

在 HTML 中加入一個按鈕，用來測試：

<button >alertCookieValue()">Show cookie value</button>

請點擊下面這個按鈕進行測試：

僅執行一次的程式碼

如果希望某一段 JavaScript 程式碼僅執行一次，可以使用 cookie 來判斷：

function doOnce() {
  if (document.cookie.replace(/(?:(?:^|.*;\s*)doSomethingOnlyOnce\s*\=\s*([^;]*).*$)|^.*$/, "$1") !== "true") {
    alert("Do something here!");
    document.cookie = "doSomethingOnlyOnce=true; expires=Fri, 31 Dec 9999 23:59:59 GMT";
  }
}

在 HTML 中加入一個按鈕，用來測試：

<button >doOnce()">Only do something once</button>

請點擊下面這個按鈕進行測試：

若要重設上面的 cookie，可以這樣做：

function resetOnce() {
  document.cookie = "doSomethingOnlyOnce=; expires=Thu, 01 Jan 1970 00:00:00 GMT";
}

在 HTML 中加入一個按鈕，用來測試：

<button >resetOnce()">Reset only once cookie</button>

請點擊下面這個按鈕進行測試：