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

2023/04/24閱讀時間約 4 分鐘

本篇要解決的問題

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

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

主要是實作一個 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 首頁，會看到以下：

進到 Google 首頁 Cookie 就會被存值

參考資源的第二篇，寫到 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: '/' }
);