---
# System prepended metadata

title: "\U0001F3C5 Day 12 - 讓瀏覽器記住妙麗的生日：認識 localStorage"
tags: [2025 VibeCoding 體驗營]

---

# 🏅 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)
