静态HTML网站如何保存用户最后使用的明暗模式

当然可以实现啦！其实用浏览器自带的localStorage就能轻松搞定这个需求——它专门用来在用户浏览器里存储少量键值对数据，刷新页面或者重新打开浏览器都不会丢失，特别适合这种静态网站的场景。

我们只需要对你现有的JavaScript代码做两处小修改：一是页面加载时读取之前保存的模式并自动应用，二是点击切换按钮时同步更新存储的状态。

修改后的完整JavaScript代码 #

const html = document.querySelector('html');
const button = document.querySelector('.contrast-toggle');

// 页面加载时，读取本地存储的模式并应用
const savedMode = localStorage.getItem('darkMode');
if (savedMode === 'enabled') {
  html.classList.add('dark-mode');
}

button.addEventListener('click', e => {
  e.preventDefault();
  // 切换明暗模式类
  html.classList.toggle('dark-mode');
  // 根据当前状态更新本地存储
  if (html.classList.contains('dark-mode')) {
    localStorage.setItem('darkMode', 'enabled');
  } else {
    localStorage.setItem('darkMode', 'disabled');
  }
});

代码说明 #

• localStorage.getItem('darkMode')：从浏览器本地存储中取出用户上次保存的模式状态
• 页面初始化时，如果存储的状态是enabled，就自动给<html>标签加上dark-mode类，实现打开页面直接显示用户偏好的模式
• 点击切换按钮时，除了切换类，还会检查当前<html>是否包含dark-mode类，然后把对应的状态存入localStorage，确保下次访问时能读取到

可选优化：添加过渡动画 #

如果你想让模式切换更丝滑，可以在CSS里加个过渡效果，比如：

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  transition: background-color 0.3s ease, color 0.3s ease; /* 颜色过渡动画 */
}

/* 浅色模式默认样式 */
body {
  background-color: #fff;
  color: #333;
}

/* 深色模式样式 */
.dark-mode body {
  background-color: #1a1a1a;
  color: #f0f0f0;
}

这个方法完全不需要后端支持，所有操作都在用户浏览器内完成，完美适配你的静态网站需求～

备注：内容来源于stack exchange，提问作者user1406440