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

js-cookie

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

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

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

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

在引入 JavaScript 檔案時，請不要直接使用 GitHub 的 raw 網址（http://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' });

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 官方網頁上的說明。

參考資料：MDN

繼續閱讀： 12