---

由于才刚学这玩意，有很多东西都记不清，所以在用到的时候就把那种写法和作用记录下来。

一，classList

每个元素都有一个classList，它表示该元素的类名列表（即 class=“…” 里写的内容）。
classList 提供了一些方便的方法来添加、删除、切换类名，比如 add、remove、toggle、contains 等。

当你调用 element.classList.toggle(‘dark-theme’) 时，浏览器在底层做的事情其实就是修改这个元素的 class 属性（在 HTML 上就是 class=“…” 那个字符串）。

怎么用？

1. 获取元素的 classList

// 假设有一个 <div id="box" class="old red"></div>
const box = document.getElementById('box');
console.log(box.classList); // 输出 DOMTokenList(2) ["old", "red", value: "old red"]

2. 添加类（add）

box.classList.add('highlight');
// 结果：<div id="box" class="old red highlight"></div>

3. 删除类（remove）

box.classList.remove('old');
// 结果：<div id="box" class="red highlight"></div>

4. 切换类（toggle）—— 有则删，无则加

这个是重点，可以用来更换页面的背景样式。

// 当前没有 'dark' 类
box.classList.toggle('dark');
// 结果：<div id="box" class="red highlight dark"></div>

// 再次 toggle
box.classList.toggle('dark');
// 结果：<div id="box" class="red highlight"></div> （dark 被删除）

5. 检查是否存在某个类（contains）

if (box.classList.contains('red')) {
    console.log('是红色');
}

6. 替换类（replace）

box.classList.replace('red', 'blue');
// 结果：<div id="box" class="blue highlight"></div>

---

实战：切换深色主题（结合 localStorage）

<button id="themeBtn">切换主题</button>

<script>
  const body = document.body;
  const btn = document.getElementById('themeBtn');

  // 读取上次保存的主题
  if (localStorage.getItem('theme') === 'dark') {
    body.classList.add('dark-theme');
  }

  btn.addEventListener('click', () => {
    body.classList.toggle('dark-theme');
    // 保存用户选择
    const isDark = body.classList.contains('dark-theme');
    localStorage.setItem('theme', isDark ? 'dark' : 'light');
  });
</script>

小贴士

• classList 的所有方法都自动处理重复类名、多余空格，不会出错。
• 多个类同时操作：add('a', 'b', 'c') 或 remove('x', 'y') 也是可以的。
• 修改 className 属性也可以，但更容易出错，推荐使用 classList。

---

二，localStorage

localStorage 是浏览器提供的本地存储对象，可以把数据保存在用户的浏览器中，即使关闭页面或重启浏览器也不会丢失（除非手动清除）。

特点

• 只能存字符串；存对象/数组需要用 JSON.stringify 转成字符串，取出时用 JSON.parse 还原。
• 存储大小约 5~10 MB。
• 同一个网站的不同页面都能访问到相同的 localStorage。

怎么用？

1. 存储数据（增 / 改）

localStorage.setItem('key', 'value');

实际例子：

localStorage.setItem('theme', 'dark');
localStorage.setItem('user', JSON.stringify({ name: '小明', age: 18 }));

2. 读取数据

const theme = localStorage.getItem('theme');        // 得到字符串 'dark'
const user = JSON.parse(localStorage.getItem('user')); // 得到对象 { name: '小明', age: 18 }

如果某个 key 不存在，getItem 返回 null。

3. 删除数据

localStorage.removeItem('theme');   // 只删 theme 这一条
localStorage.clear();               // 清空所有存储的数据

4. 其他方法（了解即可）

localStorage.length;          // 获取存储了多少条数据
localStorage.key(0);          // 获取索引为 0 的 key 名称

---

实战：记住用户的主题选择（接 classList 例子）

<button id="themeBtn">切换深色主题</button>

<script>
  const body = document.body;
  const btn = document.getElementById('themeBtn');

  // 页面加载时：读取之前保存的主题
  const savedTheme = localStorage.getItem('theme');
  if (savedTheme === 'dark') {
    body.classList.add('dark-theme');
  }

  btn.addEventListener('click', () => {
    // 切换深色类
    body.classList.toggle('dark-theme');
    // 判断当前是否有深色类，并保存到 localStorage
    const isDark = body.classList.contains('dark-theme');
    localStorage.setItem('theme', isDark ? 'dark' : 'light');
  });
</script>

小贴士

• localStorage 里只能存字符串，不要直接存对象。
• 不要在 localStorage 里存密码、token 等敏感信息，因为它容易受到 XSS 攻击。
• 如果想临时存数据（关闭标签页就清除），可以用 sessionStorage，它的用法和 localStorage 完全一样。

---