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

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

我們可以在 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 只能於加密的連線中傳送。

Hello World

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

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

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

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

這是從 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 onclick="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 onclick="doOnce()">Only do something once</button>

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

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

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

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

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

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

如果您不想花太多時間自己撰寫管理 cookie 的程式碼，可以使用 js-cookie 這個 JavaScript API 工具，它可以讓您很直覺的儲存與讀取 cookie 中的資料，不需要去碰 cookie 底層細部的結構。

名稱：js-cookie
網址：https://github.com/js-cookie/js-cookie

以下我們介紹 js-cookie 的安裝與使用方式。

首先從 GitHub 上下載 js-cookie 的 JavaScript 檔，然後將這個 JavaScript 引入自己的網頁中，放在 <head> 中。

<script src="/path/to/js.cookie.js"></script>

在引入 JavaScript 檔案時，請不要直接使用 GitHub 的 raw 網址（https://raw.github.com/...），由於 GitHub 這個的網址會以 text/plain 的形式送出，在某些瀏覽器會被擋掉（例如 Windows 7 的 IE）。

接下來就可以在 JavaScript 使用 js-cookie 了，若要建立一個 cookie，則使用 set：

Cookies.set('name', 'value');

讀取則是使用 get：

myvar = Cookies.get('name');

設定 cookie 的使用期限：

Cookies.set('name', 'value', { expires: 7 });

這裡的 expires 參數的單位是天，上面這樣的設定就是一個可以使用 7 天的 cookie。若沒有指定 expires，則預設會建立 session cookie（session 結束就刪除的 cookie）。

設定 cookie 的路徑：

Cookies.set('name', 'value', { path: '/mypath' });

設定 cookie 的路徑為目前網頁的路徑：

Cookies.set('name', 'value', { path: '' });

如果沒有指定 path 的話，預設是 /。

若要刪除 cookie 可以使用 remove：

Cookies.remove('name');

刪除 cookie 時要注意 cookie 的路徑，路徑的指定方式跟建立時相同：

// 建立 cookie
Cookies.set('name', 'value', { path: '/mypath' });
// 刪除 cookie
Cookies.remove('name', { path: '/mypath' });

JSON

js-cookie 還有一個很好用的功能就是可以將 JavaScript 的物件自動轉為 JSON 字串儲存在 cookie 中（使用 JSON.stringify）：

Cookies.set('name', { foo: 'bar' });

使用 get 讀取時，就會得到 JSON 的字串：

Cookies.get('name'); // 得到 '{"foo":"bar"}' 這個字串

亦可直接呼叫 get 不帶任何參數：

Cookies.get(); // 得到 { name: '{"foo":"bar"}' }

如果想要讀取解析過後的 JSON 物件，可以使用 getJSON：

Cookies.getJSON('name'); // 得到 { foo: 'bar' }
Cookies.getJSON(); // 得到 { name: { foo: 'bar' } }

關於 js-cookie 其他更多的使用方式，可以參考 js-cookie 官方網頁上的說明。

參考資料