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

使用 Cookie 實現 Client 端數據存儲 - 前端工程師必學的 Web Storage 技術(第一篇)
使用 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 首頁,會看到以下:

進到 Google 首頁 Cookie 就會被存值
進到 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: '/' }
);

Demo 及原始碼

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

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

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


瀏覽器上的儲存空間系列

Summary
使用 Cookie 實現 Client 端數據存儲 - 前端工程師必學的 Web Storage 技術(第一篇)
Article Name
使用 Cookie 實現 Client 端數據存儲 - 前端工程師必學的 Web Storage 技術(第一篇)
Description
深入了解使用 Cookie 實現客戶端數據存儲的技巧和最佳實踐。本文詳細解釋了 Cookie 的基本概念、限制、原生寫法,並推薦了一個實用的 JavaScript Cookie 套件,附帶實用 Demo 和原始碼。
Augustus
Let's Write
Let's Write
https://letswrite.tw/wp-content/uploads/2020/08/logo_512.jpg
訂閱
通知
guest

0 Comments
Inline Feedbacks
看所有留言