如何使用Local Storage保存切换类的状态？

嘿，我来帮你搞定这个问题！你现在已经有了切换类的基础代码，要把状态存在Local Storage里并让全站都生效其实很简单，分两步来就行：

一、页面加载时恢复之前的状态 #

当用户打开网站的任意页面时，我们要先从Local Storage里读取之前保存的状态，然后把对应的元素设置成正确的样式。代码可以这么写：

// 等页面DOM加载完成后执行
window.addEventListener('DOMContentLoaded', function() {
  // 替换成你实际要操作的元素ID
  var targetElement = document.getElementById('your-element-id');
  // 从Local Storage读取状态，默认设为未启用（没加crt类）
  var isCrtEnabled = localStorage.getItem('crtEnabled') === 'true';
  
  if (isCrtEnabled) {
    targetElement.classList.add('crt');
  } else {
    targetElement.classList.remove('crt');
  }
});

二、修改切换函数，保存状态到Local Storage #

每次用户点击切换按钮时，除了切换类，还要把当前的状态存到Local Storage里，这样下次打开页面或者跳转到其他页面时，状态就能保留了。调整后的切换函数如下：

function myFunction() {
  // 同样替换成你实际的元素ID
  var targetElement = document.getElementById('your-element-id');
  // 切换crt类
  targetElement.classList.toggle('crt');
  // 获取当前是否启用了crt类，转成字符串存到Local Storage（因为Local Storage只能存字符串）
  var currentState = targetElement.classList.contains('crt');
  localStorage.setItem('crtEnabled', currentState.toString());
}

几个小提醒： #

• 一定要确保你的目标元素有唯一的id，不然getElementById找不到对应的元素，代码就没用啦。
• Local Storage是和你的域名绑定的，所以同一域名下的所有页面都能读取到这个保存的状态，完美实现全站同步。
• Local Storage只能存储字符串类型的数据，所以我们要把布尔值转成字符串再存储，读取的时候再通过判断字符串是否为'true'来还原状态。

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