页面高对比度状态跨页面保持问题求助（jQuery实现）

当然可行！你遇到的问题是因为当前的高对比度状态只存在于浏览器的临时内存中，页面跳转或刷新后就会重置。我们不需要替换toggleClass()，只需要给它加上状态持久化的逻辑就能解决这个问题，具体步骤如下：

1. 用localStorage存储切换状态 #

localStorage是浏览器提供的本地存储API，能把数据持久保存在用户设备上，站内所有页面都能访问到。我们在点击切换按钮时，把当前是否处于高对比度模式的状态存进去：

首先优化你的代码，把需要切换的元素和对应类名整理成一个配置数组（避免重复写一堆选择器，后期维护更方便）：

// 整理所有需要切换高对比度类的元素配置
const contrastElementConfigs = [
  { selector: '.accessibility-icons span', className: 'high-contrast' },
  { selector: 'a', className: 'high-contrast' },
  { selector: '.post-short', className: 'post-short-contrast' },
  { selector: '.contact-page-container', className: 'contact-page-container-contrast' },
  { selector: '.hours-container', className: 'hours-container-contrast' },
  { selector: '.site', className: 'site-high-contrast' },
  { selector: '.site-footer', className: 'site-info-contrast' },
  { selector: '.footer-info', className: 'footer-info-contrast' },
  { selector: '.bip', className: 'bip-contrast' },
  { selector: '.form-wrapper', className: 'form-wrapper-contrast' },
  { selector: '.menu-item', className: 'menu-item-contrast' },
  { selector: '.header-carousel_title', className: 'header-carousel_title-contrast' },
  { selector: '.logo-carousel', className: 'logo-carousel-contrast' },
  { selector: '.home-title', className: 'home-title-contrast' },
  { selector: '.hours-title', className: 'hours-title-contrast' },
  { selector: '.page-main-title', className: 'page-main-title-contrast' },
  { selector: '.gallery-title', className: 'gallery-title-contrast' },
  { selector: 'article', className: 'article-contrast' },
  { selector: '.owl-item', className: 'owl-item-contrast' },
  { selector: '.gallery-container', className: 'gallery-container-contrast' },
  { selector: '.gallery-button', className: 'gallery-button-contrast' },
  { selector: '.page-link-button', className: 'page-link-button-contrast' },
  { selector: '.post-short_title', className: 'post-short_title-contrast' },
  { selector: '.excerpt', className: 'excerpt-contrast' }
];

// 按钮点击事件：切换类 + 保存状态
$('.change-contrast').click(function() {
  let isHighContrastEnabled = false;
  
  contrastElementConfigs.forEach(config => {
    $(config.selector).toggleClass(config.className);
    // 以第一个元素的状态作为全局状态（因为所有元素同步切换）
    if (config.selector === '.accessibility-icons span') {
      isHighContrastEnabled = $(config.selector).hasClass(config.className);
    }
  });
  
  // 把状态存入localStorage
  localStorage.setItem('isHighContrastEnabled', isHighContrastEnabled);
});

2. 页面加载时读取状态并应用类 #

每次页面加载完成后，我们从localStorage里读取之前保存的状态，如果是开启状态，就自动给所有元素加上对应的高对比度类：

// 初始化高对比度状态
function initHighContrast() {
  const isEnabled = localStorage.getItem('isHighContrastEnabled') === 'true';
  
  if (isEnabled) {
    contrastElementConfigs.forEach(config => {
      $(config.selector).addClass(config.className);
    });
  }
}

// DOM加载完成后执行初始化
$(document).ready(initHighContrast);

关键说明 #

• 不需要替换toggleClass()：它的切换逻辑完全没问题，我们只是补充了状态持久化的步骤，让切换状态能跨页面保留。
• localStorage的特性：数据会一直保存在用户设备上，直到用户手动清除浏览器缓存或你用代码删除，站内所有同源页面都能访问这个状态。
• 兼容性：现在绝大多数现代浏览器都支持localStorage，如果需要兼容极老的浏览器（比如IE8及以下），可以把localStorage换成cookie，逻辑是类似的。

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