本篇要解決的問題
不是每次要取資料時，都必須調用 API 後才能拿到，因為瀏覽器本身就有提供一些空間可以暫存，我們可以把一些不常更新的資料存在瀏覽器上，調用 API 前就先加個判斷，瀏覽器上有存的話就直接取用，沒有存再去調用，這樣可以減少 API 主機的呼叫次數。
關於瀏覽器上的儲存空間，預計會寫成系列文，項目包含：
主要是實作一個 Demo 出來，也會推薦 August 用過後覺得好用的套件，寫起來更快更方便。
最後完成的 Demo 會在這：
https://letswritetw.github.io/letswrite-client-storage/
參考資源：
Browser storage: Local Storage, Session Storage, Cookie, IndexedDB and WebSQL
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
