# 🏅 Day 12 - 讓瀏覽器記住妙麗的生日：認識 localStorage 還記得 Day 06 的「妙麗歲數計算機」嗎？ 當時我們是：輸入妙麗的生日 → 按下計算 → 顯示狗年齡＆人類年齡。 但有一個小小不方便： > 每次重新整理網頁，生日欄位又變回空白， > 校長每次都要再輸入一次 2023-02-28，非常不方便（而且又容易打錯 😭） 今天，我們要多學一個關鍵字：**localStorage**。 讓「妙麗歲數計算機」多一個能力： > 👉 按下計算時，把輸入的生日存到瀏覽器裡。 > 👉 下次打開頁面時，自動幫你把生日填回輸入框。 --- ## localStorage 是什麼？ 你可以先把它當成： > 「存在瀏覽器裡的小型備忘錄」 特色： - 只要是**同一台裝置＋同一個瀏覽器**，資料會一直存在（關掉分頁 / 關機再開都還在）。 - 可以用「關鍵字（key）」＋「字串（value）」的方式存東西。 - 常見用途：記住使用者偏好、記住上次輸入的資料…等等 ## 範例語法 * 請將以下語法丟到 Codepen ，並按 Save 儲存，寫一些文字並送出 * 重新整理 Codepen，你會發現他還會在 ```html= <!DOCTYPE html> <html lang="zh-Hant"> <head> <meta charset="UTF-8"> <title>localStorage 簡單範例</title> </head> <body> <h1>📝 小小記事本（localStorage 範例）</h1> <p>請輸入一些文字，按下「儲存」，再試試看重新整理頁面：</p> <input id="note-input" type="text" placeholder="想記住的文字" style="width: 280px;"> <button id="save-btn">儲存</button> <p id="display">目前還沒有儲存任何文字。</p> <script> const KEY = 'my-note'; const input = document.getElementById('note-input'); const saveBtn = document.getElementById('save-btn'); const display = document.getElementById('display'); // 第一次進來頁面時，先試著把舊資料拿出來 const saved = localStorage.getItem(KEY); if (saved) { input.value = saved; display.textContent = '目前儲存的文字：' + saved; } // 按下儲存，就把文字存進 localStorage saveBtn.addEventListener('click', function () { const text = input.value; localStorage.setItem(KEY, text); display.textContent = text ? '目前儲存的文字：' + text : '目前還沒有儲存任何文字。'; }); </script> </body> </html> ``` ## 究竟 localstorage 將值存在哪裡呢？ localstorage 在每個網域上都會有個小記事本永久存放資料，很適合放 `用戶瀏覽記錄`、`個人相關記錄` * Chrome 在網頁按右鍵 > 檢查 ![截圖 2025-11-12 下午4.47.18](https://hackmd.io/_uploads/rkBoYpbxWg.png) ![截圖_2025-11-12_下午4_49_49](https://hackmd.io/_uploads/B1TFc6WeWl.png) ## 題目 1. 請嘗試 Vibe，美化妙麗年齡計算機 2. 填寫生日資訊，按出計算後，會顯示狗與人類年齡 3. 重新整理畫面後，也能出現上次運算結果(會用到 localstorage 語法) 詳情可觀看下方 YouTube 影片示範： {%youtube kA7qRbnlj74 %} ## 回報格式 1. 您的 GitHub Pages 網址，必須用 GitHub 2. 您設計的 prompt PS：明天的每日任務，將會製作網頁 App 桌面捷徑，會需要使用 GitHub Pages，方可達到~ ![IMG_7564 (1)](https://hackmd.io/_uploads/r1Y8YCZgbl.png)