在用一些網站的時候，是不是常有這種經驗：

你辛辛苦苦選好了一堆內容，結果不小心點了返回上一頁，或不小心直接關掉了網頁，當你以為煩躁又要重選的時候，但你重新打開該頁面時，你剛剛選的東竟然還在！

或者，一進到一個網站，它立刻跳出一個對話框問你：

「是否接受 Cookie 🍪？」

雖然你可能根本不確定網頁上的 Cookie 是什麼，但它擋在你面前擋住你瀏覽網頁，你也只好接受了它。

這些情況，背後其實都跟網頁儲存機制有關。它會把你在網頁上的足跡與狀態記錄下來，等你回來時還原出原本的樣子。

那麼，網頁到底是怎麼記住我們的資料的呢？

今天就來聊聊瀏覽器提供的幾種資料儲存方式：

1. Cookie
2. LocalStorage
3. SessionStorage
4. IndexedDB

（本來想要一起講，但查一查發現Cookie很有趣，就寫了很長

剩下明天再說！）

Cookie 🍪

• 容量：大約 4KB
• 生命週期：可設定到期時間，預設關閉瀏覽器後就刪除
• 應用場景：
  • 記住登入狀態（不用每次都重新輸入帳號密碼）
  • 記錄追蹤資訊（廣告、分析工具）

Cookie種類

• Session Cookie：只在瀏覽器開啟期間有效，關閉即失效，有助於維持網站流程，如購物車內容
• Persistent Cookie（持久 Cookie）：擁有到期時間，即使瀏覽器關閉仍會保留，用於記住登入、語言設定等
• First-Party Cookie（第一方）：由使用者目前瀏覽網站設定，用於提升 UX，例如記住偏好或保持登入
• Third-Party Cookie（第三方）：由非使用網站域名的其他網站設定，多用於跨網站追蹤與廣告投放，常被視為隱私風險

Note：補充一些我覺得名字很可愛的Cookie

• Zombie cookie 🧟
  • 被刪掉後還會「復活」的 Cookie
  • 原理是網站會在多處（Flash、HTML5 Storage、IndexedDB 等）備份 Cookie，一旦被刪除就還原
  • 常被用於持續追蹤，也有資安風險
• Cookie wall
  • 網頁一打開就會看到一個cookie 牆
  • 沒有拒絕選項，要被迫接受cookie才能瀏覽網站
• Supercookie 🦸🏻‍♀️
  • 能跨多個網域追蹤你的 Cookie，通常儲存在更底層（例如 ISP 層面）
  • 比普通 Cookie 更難刪除，隱私風險極高

Cookie裡面有什麼？

放在 HTTP 的 Set-Cookie 標頭裡

Set-Cookie: 

name=Tom; 
Expires=Wed, 09 Aug 2025 12:00:00 GMT; 
Domain=127.0.0.1;
Path=/; 
Secure; 
HttpOnly; 
SameSite=Lax

• name = Tom ：存的資料（名稱+值）
• Domain / Path ： 限制在哪些路徑有效
• Expires / Max-Age ： 到期時間
• Secure ：只在 HTTPS 傳送
• **HttpOnly ：**JavaScript 不能讀，抵禦 XSS 攻擊
• SameSite ： 限制跨網站（第三方）傳送 Cookie 的方式

Cookie 怎麼設定？

// 設定一個有效期 7 天的 Cookie
document.cookie = "username=Tom; max-age=" + 7*24*60*60;

印出 Cookie：

console.log(document.cookie); //username=Tom

• 這邊只能看到不是HttpOnly的Cookie
• 會以 name=value; name2=value2 這種形式回傳

如果要看所有該網域的 Cookie（包括JS不能直接讀的HttpOnly），可以到：開發者工具（右鍵檢查 or F12） → 應用程式 → 左邊選單就可以看到Cookie → 點開你要的網站網域

就會像下面這樣👇，剛剛的 username = Tom 就被存在下面第三個，前面的欄位就是我們剛剛說的

（而上方兩個 _ga 什麼的，就是Google Analytics設定追蹤訪客行為的Cookie）

Cookie的運作流程

1. 你第一次進入網站

   瀏覽器發送一個 HTTP 請求 到網站的伺服器：

   GET /index.html HTTP/1.1
   Host: example.com
   

   伺服器第一次看到這個瀏覽器，為了要記住，於是回應時加上Set-Cookie：

   HTTP/1.1 200 OK
   Content-Type: text/html
   Set-Cookie: username=Tom; Max-Age=604800; Path=/; Secure; HttpOnly
   

   記錄了username=Tom 、有效7天、並且只能在此Path使用

2. 瀏覽器把 Cookie 收起來

   瀏覽器自動在自己的 Cookie 儲存區 建立一筆記錄

3. 之後每次再去同一網站

   你再訪問該網站的其他頁面，例如：

   GET /profile HTTP/1.1
   Host: example.com
   

   • 瀏覽器會自動附上 Cookie：

     Cookie: username=Tom
     

   • 伺服器一看到 username=Tom，就知道是你，能直接顯示個人化內容，例如「How’s it going, Tom?」。

4. 伺服器也能修改 Cookie

   如果你改了暱稱，伺服器會再回傳一個新的 Set-Cookie

   Set-Cookie: username=Ricky; Max-Age=604800
   

5. 刪除 Cookie

   Set-Cookie: username=; Max-Age=0
   

大概流程如下

• 第一次訪問

  瀏覽器 → 伺服器請求 → 伺服器回應 + Set-Cookie → 瀏覽器儲存

• 之後的訪問

  瀏覽器自動附上 Cookie → 伺服器讀取 Cookie → 回應個人化內容

• 更新或刪除

  伺服器發新的 Set-Cookie → 覆蓋或清除舊 Cookie

Cookie安全嗎？

Cookie 本身不加密，它只是資料載體，所以有幾個常見的安全風險：

總結一下上面表格：

• HttpOnly → 保護不被 JS 讀取
• Secure → 僅 HTTPS 傳輸
• SameSite → 限制跨網站傳送 Cookie

Note：封鎖第三方Cookie方式

• In Chrome：Settings > Privacy and Security > Cookies and other site data > Block third-party cookies

參考資料

https://miahsuwork.medium.com/第八週-網頁資料儲存-cookie-local-storage-session-storage-a3f40013da37

https://ithelp.ithome.com.tw/articles/10268532

https://en.wikipedia.org/wiki/HTTP_cookie

https://www.haranhuang.com/which-cookies-are-used-by-google-analytics-4.html

https://www.koc.com.tw/archives/577123

https://www.geeksforgeeks.org/computer-networks/what-are-zombie-cookies-and-can-you-block-them/