LESSON 05A · 午餐揪團頁主線 · 原第 5 堂拆分（上）

資料（上）：資料驅動畫面 + localStorage

解決上一堂的痛：重整就忘記。今天你的頁面會「吃進」一份真正的資料清單，而且「我要跟」的狀態會存進瀏覽器的抽屜——重整之後，它還在。

解決重整歸零資料驅動畫面 localStorage 抽屜產出：重整還在

✓

完成定義 · Definition of Done

學員重整頁面後，「我要跟」的狀態還在；且頁面至少有一個資料來源是「清單長出來」而非手刻。

0:00–0:05	回顧痛點：上次重整就忘記，今天解決
0:05–0:15	概念 1：資料驅動畫面
0:15–0:30	動手：把揪團卡改成用一份資料清單「長出來」
0:30–0:40	概念 2：localStorage 抽屜比喻
0:40–0:55	動手：「我要跟」存進 localStorage，全班重整驗證（本堂高潮）
0:55–1:00	收尾 + 預告：下一節（5b）要抓外部真實資料

01資料驅動畫面

問一個問題：如果今天不是 3 家餐廳，是 50 家，你要手寫 50 張卡片的 HTML 嗎？更聰明的做法：先準備一份清單（資料），然後告訴程式「照著清單，每一筆畫一張卡片」。

📄為什麼重要

改清單，畫面就跟著變。以後要加餐廳，只要在清單裡加一筆，不用再手刻 HTML。這是接下來 React 最核心的精神，今天先在原生 JS 裡體驗一次。

圖 1.1資料驅動畫面：一份清單，程式照著「每一筆畫一張卡」。改清單，畫面自動跟著長。

02localStorage：瀏覽器裡的抽屜

想像瀏覽器裡有一個抽屜：你把東西放進去，就算把頁面關掉重開，抽屜還在原地、東西沒有不見。這個抽屜叫 localStorage。

圖 2.1localStorage 是瀏覽器裡的抽屜：放進去重整還在——但抽屜是裝置專屬的，換手機就是空的（第 7 堂的伏筆）。

重要限制（第 7 堂的伏筆）：這個抽屜只在這一台裝置、這個瀏覽器裡。你今天放進去的東西，換一支手機打開同一個網頁，抽屜是空的；同事打開他的電腦，也看不到你的抽屜。

03動手：接上抽屜

·AI Prompt speed dial起手式 · 用自己的話改

A資料驅動畫面

目前我的午餐揪團頁裡，每張揪團卡是分開手寫的 HTML。
請幫我改成：先建立一個 JavaScript 陣列，
裡面每一筆資料包含「餐廳名稱、發起人、人數」，
然後用程式自動把這份陣列的每一筆資料，畫成一張揪團卡。
之後我只要修改陣列內容，畫面就會自動跟著變。

B接上 localStorage

目前「我要跟」按鈕點擊後人數會變化，但重新整理頁面後又變回原本的數字。
請幫我把這個狀態存進瀏覽器的 localStorage，
這樣重新整理頁面後，之前的人數和「已加入」狀態都要維持。

C理解 localStorage 的局限

請解釋一下，如果我今天用手機打開這個午餐揪團頁，
剛剛在電腦上存進 localStorage 的「我要跟」紀錄，
手機上看得到嗎？為什麼？

·作業與檢核

作業：一張 issue ＋一個 PR——讓另一個資料也存進 localStorage。PR 描述包含：「這個資料存在哪裡？重整、換裝置分別會不會不見？」

講師 / 助教檢核重點