使用 Cookie 實現 Client 端數據存儲 - 前端工程師必學的 Web Storage 技術（第一篇）

本篇要解決的問題

不是每次要取資料時，都必須調用 API 後才能拿到，因為瀏覽器本身就有提供一些空間可以暫存，我們可以把一些不常更新的資料存在瀏覽器上，調用 API 前就先加個判斷，瀏覽器上有存的話就直接取用，沒有存再去調用，這樣可以減少 API 主機的呼叫次數。

關於瀏覽器上的儲存空間，預計會寫成系列文，項目包含：

• Cookie
• Session Storage、Local Storage
• IndexedDB

主要是實作一個 Demo 出來，也會推薦 August 用過後覺得好用的套件，寫起來更快更方便。

最後完成的 Demo 會在這：

https://letswritetw.github.io/letswrite-client-storage/

參考資源：

Browser storage: Local Storage, Session Storage, Cookie, IndexedDB and WebSQL

Storage for the web

Cookie

• 限制數量：180 個（Chrome）
• 限制大小：4KB
• 限制期限：可設定，未設定則頁籤關閉就會被刪除

把 Cookie 寫在第一篇，是因為我們真的很常會把一些資料存在 Cookie 裡，基本上隨便進一個網站，打開檢查面版看一下，就會看見 Cookie 被塞了資料，比方我們進到 Google 首頁，會看到以下：

參考資源的第二篇，寫到 Cookie 的部份介紹的很好，一般 Cookie 不是什麼都往裡面存，會存的資料都有著特定目的，因為 Cookie 會隨每個 HTTP 請求一起發送。

常見儲存在 Cookie 的資料，比方登入會員後，如果想要讓瀏覽器保留登入狀態，一般就是在 Cookie 裡面存某些加密過的值。

Cookie 有限制，Chrome 的話最多可存 180 個 Cookie，每個 Cookie 的大小限制為 4MB。

那當然，請不要真的用到這麼緊繃，August 曾發生過存了太多的資料到 Cookie，結果頁面打開時直接報 400 Bad Request，就是因為 Cookie 會跟著 HTTP request 出去，變成送出去的資料太多，最後是清掉 Cookie 才解決。

Cookie 用原生寫起來會落落長，這邊推薦一個超好用套件：JavaScript Cookie。

CDN 引用或用 import 安裝完後，以下是常用的功能：

// 存 Cookie
Cookies.set('foo', 'bar');

// 存 Cookie + 設定期限
Cookies.set('foo', 'bar', { expires: 7 });

// 存 Cookie + 設期限 + 限網域
Cookies.set('foo', 'bar',
    { expires: 7, domain: '.example.com', path: '/' }
);

// 抓 Cookie 的值
Cookies.get('foo'); // => 'bar'

// 刪 Cookie
Cookies.remove('foo');

// 刪 Cookie，如果存的時候有指定網域時
Cookies.remove('foo',
    { domain: '.example.com', path: '/' }
);

Demo 及原始碼

Demo 及原始碼都放在 GitHub 上了，取用之前麻煩分享本篇或在 GitHub 上按個星星，你的小小動作對本站都是大大的鼓勵。

Demo：https://letswritetw.github.io/letswrite-client-storage/

原始碼：https://github.com/letswritetw/letswrite-client-storage

瀏覽器上的儲存空間系列

• Cookies
• sessionStorage、localStorage
• IndexedDB