瀏覽器上的儲存空間:Cookie

/

本篇要解決的問題

不是每次要取資料時,都必須調用 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
Article Name
瀏覽器上的儲存空間:Cookie
Description
本篇大綱:本篇要解決的問題。Cookie。Demo 及原始碼。關於瀏覽器上的儲存空間,預計會寫成系列文,項目包含:Cookie、Session Storage、Local Storage、IndexedDB。
Augustus
Let's Write
Let's Write
https://letswrite.tw/wp-content/uploads/2020/08/logo_512.jpg

以下是留言,但關於留言的部份必需先讓你們知道:

本站的文章都是 August 因為覺得有趣,才會實作並整理成筆記文而後進行發表。

如果留言是希望把 Demo 改成「你想要」的樣子,或是把功能改成「符合你需求」的樣子,

Sorry~ 除非那修改是 August 也有興趣的,不然不會幫你們寫程式去面對工作或是交作業。

未來這類的留言不會再主動回覆。😎

另外,公開信箱是為了讓金流驗證用,

因為之前遇過幾次回信協助解決問題後,對方卻一聲謝謝也沒有,就這樣拿去幫工作交差。

因此決定不再回覆信件,有疑問就利用留言功能囉。

Let's Write

前端工程師 August 的學習筆記 — solving problems, in simple ways.

Follow us Telegram GitHub