💾 第七课：localStorage — 网页的记忆

第六课最后留了个悬念：夜间模式一刷新就忘。这节课就来解决它——给网页装上"记忆"。

先看对比，你就明白问题出在哪：

	变量	localStorage
🎭 比喻	便签纸，贴在内存里	笔记本，写在硬盘上
⏳ 寿命	刷新页面 = 一阵风吹来，全没了	刷新、关浏览器、甚至重启电脑都还在
📦 能存什么	数字、字符串、数组……什么都行	只有字符串（后面细说这个大坑）

🎭 总比喻：网页本来是个失忆症患者——每次都像第一次见你。
localStorage 就是塞给它的一个笔记本：它会把重要的事写下来，下次见面翻本子就"想起来了"。

🗄️ 2. localStorage = 浏览器里的小抽屉

浏览器给每个网站发一个专属抽屉，谁也看不见谁的。抽屉里的存取规则：

// 每张字条 = 一对「钥匙名 → 内容」

localStorage.setItem("theme", "dark");  // 把字条放进抽屉

localStorage.getItem("theme");        // 报出钥匙名，把字条拿出来 → "dark"

钥匙名（key）是你自己起的名字，内容（value）是你要存的东西。就像图书馆：报书名（key），管理员把书（value）找给你。

⚠️ 重要规则：抽屉是"同源共享"的。同一个网站的所有页面共用同一个抽屉。
你用 file:// 打开本地文件时，Chrome/Edge 会把本地文件当成"一家人"共用抽屉——所以钥匙名别撞车（本课件演示用的钥匙都带 demo- 前缀，就是为了不和你的主页撞）。

🔧 偷看抽屉的绝招：按 F12 打开开发者工具 → Application（应用）标签 → 左侧找 Local Storage → 点开就能看到抽屉里所有字条，还能手动改、手动删。调试网页记忆全靠它。

👨‍👩‍👦 3. 抽屉操作"三兄弟" — 存、取、删

操作	代码	比喻
📥 存	`setItem(钥匙, 内容)`	把字条放进抽屉（同名钥匙会覆盖旧字条）
📤 取	`getItem(钥匙)`	报钥匙名拿字条；没有这把钥匙 → 返回 `null`（就是"查无此条"）
🗑️ 删	`removeItem(钥匙)`	把某一张字条撕掉
💣 清空	`clear()`	整个抽屉倒掉，一张不剩（慎用！）

localStorage.setItem("name", "一场戏一人生");

localStorage.getItem("name");     // → "一场戏一人生"

localStorage.getItem("身高");     // → null（查无此条）

localStorage.removeItem("name"); // 撕掉这张字条

🎮 4. 亲手玩：抽屉操作台

下面是一个真正的抽屉（就是本页面自己的 localStorage）。随便存、取、删，然后按 F5 刷新页面——看看你存的字条还在不在：

🔑 钥匙名： 📝 内容：

取出结果：

还没操作

抽屉里现在有的字条：

（空）

💥 冲击演示：访问计数器

下面这个数字会记住你——按 F5 刷新试试，它每次都 +1，刷新不掉：

你已经刷新本课件

?

次（去 F12 → Application → Local Storage 里看它存的字条）

原理就三行：读旧数 → +1 → 存回去。刷新前它把数字"写进笔记本"，刷新后"翻开笔记本接着数"。

🕳️ 5. 大坑：抽屉里只能放"字条"（字符串）

存一个数字进去试试：

localStorage.setItem("age", 42);

let x = localStorage.getItem("age");

typeof x;   // → "string"！不是 "number"！

存进去的是数字 42，取出来变成了字符串 "42"。抽屉只会写字，数字一进抽屉就"被穿上引号"。

🎭 比喻：抽屉只收字条，你塞一个苹果进去，出来时苹果上被贴了张纸写着"苹果"两个字——苹果本身没了。
数字进抽屉 → 变成"数字的纸条"。想要回真数字，就撕掉纸条：用 Number() 转换。

解法：取出来时用 Number() 还原

let n = Number(localStorage.getItem("age")) || 0;

// Number("42") → 42；如果抽屉里没有（null），|| 0 兜底变成 0

上面的计数器演示就是这么写的——这就是为什么它能 +1 而不是 +"1"。

🏠 6. 实战：给主页装上记忆

打开 my-homepage.html，找到最底部的 <script>。原来的代码是：

function toggleDark() {

  document.body.classList.toggle('dark');

  let btn = document.querySelector('#dark-btn');

  btn.textContent = document.body.classList.contains('dark') ? '☀️' : '🌙';

}

第一步：存 — 每次切模式，写进抽屉

在 toggleDark 函数的最后一行后面加：

  // ⭐ 把选择写进抽屉

  let dark = document.body.classList.contains('dark');

  localStorage.setItem('theme', dark ? 'dark' : 'light');

第二步：读 — 页面打开时，先翻抽屉

在 <script> 的最开头（function 前面）加：

// ⭐ 打开页面先翻抽屉：上次选了夜间？

if (localStorage.getItem('theme') === 'dark') {

  document.body.classList.add('dark');

  document.querySelector('#dark-btn').textContent = '☀️';

}

（为什么这段要放最开头？因为要先穿衣服再出门——先戴上 dark 牌子，页面才以夜间模式亮相。）

第三步：验证

保存 → 切到夜间模式 → 按 F5 刷新。这次它记住了！ 🎉
再切回白天刷新，也是白天——抽屉里存的字条在 F12 的 Local Storage 里看得见。

🎯 这一步做完，第六课的悬念就正式回收了：网页第一次拥有了记忆。
而且你摸到了大网站的真实套路——"记住登录状态、记住购物车、记住主题色"，全是同一招。

🛠️ 7. 动手挑战

✏️ 三个挑战：

① 给主页装记忆（必做）
按上面第 6 节的三个步骤改 my-homepage.html，验证夜间模式刷新不丢。

② 访问计数器进主页
把计数器搬到主页页脚：在 footer 里加一个显示位 <span id="visit">?</span>，再在 script 里加这三行（钥匙名换成 visit）：

let n = Number(localStorage.getItem('visit')) || 0;

            n = n + 1;

            localStorage.setItem('visit', n);

            document.getElementById('visit').textContent = n;

③ 附加题：一键失忆按钮
在导航栏加个小按钮"🗑️ 重置主题"，点击后删掉记忆并刷新：

function resetTheme() {

              localStorage.removeItem('theme');

              location.reload();

            }

（location.reload() 是"刷新页面"的新咒语，记住它）

老规矩：改代码 → 保存 → 刷新。挑战 ② 里如果计数器显示的是 NaN，回想第 5 节——你忘了撕掉字条（Number()）。

📋 8. 今日总结

知识点	一句话
为什么网页会失忆	变量活在内存（便签纸），刷新即死；localStorage 写在硬盘（笔记本）
三兄弟 ⭐	`setItem` 存 / `getItem` 取 / `removeItem` 删，没有就返回 `null`
大坑 ⭐	只能存字符串，数字取出来要 `Number()` 还原
实战套路	改状态时 `setItem` 存 → 页面打开时 `getItem` 读

🎉 完成挑战后：你的主页会记住夜间模式、数着你来过的次数——
它"活了"。这才是软件和普通网页的区别：软件有记忆。

✅ 下一步？

📱

第八课：响应式设计

让主页在手机上打开也不乱——@media 媒体查询

先做挑战，做完喊我检查！🚀