如何改造现有jQuery明暗模式切图代码，通过localStorage实现状态持久化

核心改造思路 #

这个改造不需要推翻你已经写好的图片替换逻辑，只需要补三个关键环节就能实现刷新保留状态的效果：

• 每次切换模式时，在原来的图片替换动作完成后，把当前选中的模式标识写入localStorage
• 页面刚加载、DOM渲染完成的第一时间，优先读取localStorage存的模式值，提前把对应模式的图片路径设置到img元素上
• 初始化时同步匹配切换按钮的激活状态，避免按钮显示的选中态和实际图片模式对不上

具体代码改造步骤 #

1. 抽离统一的资源配置，避免把亮/暗模式的图片路径散落在各个事件代码里：
   • 给三张需要切换的图片加同一个类名（比如theme-img），不用分别给三个图片写id选择器
   • 写好亮、暗模式对应的图片路径映射表，后续不管是切换点击还是初始化加载，都从这个表里取路径，改路径的时候只需要改表就行
2. 改造点击切换逻辑：
   原来的点击事件只做了图片src替换，现在在这个逻辑后面补一个动作：把当前选中的模式值（比如light/dark两个固定值）存进localStorage即可。不要把每张图片的完整路径单独存进localStorage，只存模式标识既减少存储冗余，后续加新的可切换图片也不用改存储相关的代码。
3. 补页面初始化执行逻辑：
   在页面DOM加载完成的入口，先读localStorage里存的模式值，如果没有存值就给个默认模式（比如默认亮模式），直接按这个值给三张img设置对应src，同时把对应模式的切换按钮设为激活态，从页面加载的初始环节就保证图片和之前选的模式一致。

可直接参考的示例代码 #

// 1. 明暗模式图片资源映射
const themeImgMap = {
  light: ['./images/banner-light.png', './images/feature1-light.png', './images/feature2-light.png'],
  dark: ['./images/banner-dark.png', './images/feature1-dark.png', './images/feature2-dark.png']
};
// 批量选中所有需要切换的主题图片
const $themeImgs = $('.theme-img');

// 2. 页面初始化逻辑
$(document).ready(function() {
  // 读取本地存储的模式，无存储值时默认使用亮模式
  const savedMode = localStorage.getItem('currentTheme') || 'light';
  // 批量给图片设置对应路径
  $themeImgs.each(function(imgIndex) {
    $(this).attr('src', themeImgMap[savedMode][imgIndex]);
  });
  // 同步按钮的激活状态
  $(`.theme-switch-btn[data-theme="${savedMode}"]`).addClass('active');
});

// 3. 按钮点击切换逻辑（在你原有逻辑基础上补存储动作）
$('.theme-switch-btn').on('click', function() {
  const selectedMode = $(this).data('theme');
  // 把选中的模式存入localStorage
  localStorage.setItem('currentTheme', selectedMode);
  // 替换图片src（保留你原有这部分逻辑即可）
  $themeImgs.each(function(imgIndex) {
    $(this).attr('src', themeImgMap[selectedMode][imgIndex]);
  });
  // 更新按钮激活态
  $('.theme-switch-btn').removeClass('active');
  $(this).addClass('active');
});

常见注意事项 #

• 初始化设置图片src的逻辑尽量放在页面渲染早期执行，避免出现默认图片先加载、再被替换的闪屏问题
• 如果需要兼容“无本地存储时跟随系统明暗设置”的需求，只需要在读取本地存储的环节加判断：如果localStorage没有存值，就用window.matchMedia('(prefers-color-scheme: dark)').matches的结果判断系统默认是亮还是暗模式，其他逻辑不需要改动
• 如果你原来的代码里是给每个图片单独硬编码替换路径，建议改成从统一映射表取值的方式，减少重复代码，后续调整图片路径时只需要修改映射表配置即可，不用在各个事件逻辑里逐行找需要修改的路径

内容的提问来源于stack exchange，提问作者Titas