Javascript 如何在浏览器首选项中存储CSS类？

这是我的一段代码。它被应用在一个博客网站上。它有一个按钮，可以在黑暗模式下设置页面样式。这一切都很好

（HTML、CSS、脚本，按顺序排列）

◐
.暗模式{
背景色：#262626；
颜色：#d9d9d9；
}
.dark mode a、.dark mode span、.dark mode h2 a、.dark mode h1、.dark mode h2、.dark mode h3、.dark mode h4、.dark mode h5、.dark mode h6、.dark mode.邮箱标题、.dark mode strong.标签标题{
颜色：#d9d9d9；
}
.暗模式分区#侧栏h2跨度{
背景色：#262626；
边框颜色：#E5；
}
.dark模式#侧边栏.widget{
边框颜色：#E5；
}
.dark mode.post entry、.dark mode.entry meta{
边框底部：1px实心rgba（229229229,0.2）；
}
.dark mode div#博客寻呼机{
颜色：#d9d9d9；
背景色：#323232；
}
函数myFunction（）{
var元素=document.body；
element.classList.toggle（“暗模式”）；
}

问题是，我想在用户浏览器上存储这些暗模式设置

已经尝试了

sessionStorage

和

localStorage

，但不确定我是否在正确的位置使用了代码，是否使用了正确的键/值组合（我有：键是“样式”或“类”，值是“暗模式”）

是在这些标签之间吗？是在一个合适的JavaScript标记之间吗？它在那段代码中吗？现在，让我们使用

localStorage

作为主要设置

---

希望我足够清楚，谢谢你的帮助

您可以随意命名localstorage键，但请记住相应地对值进行操作

<button onclick="toggleMode()">Toggle theme</button>

<script>
// Theme mode key name
const LS_THEME_KEY = "theme_mode";
// Possible theme mode local storage values
const THEME_MODE_LIGHT = 0;
const THEME_MODE_DARK = 1;
// Class to be applied when dark mode is active
const BODY_DARK_MODE_CLASS = "dark-mode";
// Default theme
const DEFAULT_THEME_MODE = THEME_MODE_DARK;

// Look up current theme mode and modify the body
// tag class list accordingly.
const syncBodyClassList = (setValue) => {
  const currThemeMode = setValue !== undefined ? setValue : parseInt(localStorage.getItem(LS_THEME_KEY) || DEFAULT_THEME_MODE);
  if (currThemeMode === THEME_MODE_DARK) {
    // turn the dark theme on
    document.body.classList.add(BODY_DARK_MODE_CLASS);
  } else {
    // turn the dark theme off
    document.body.classList.remove(BODY_DARK_MODE_CLASS);
  }
};

const setThemeMode = (mode) => {
  localStorage.setItem(LS_THEME_KEY, mode);
  syncBodyClassList(mode);
}

// Toggle current theme and save it into the local storage
function toggleMode() {
  const currentValue = parseInt(localStorage.getItem(LS_THEME_KEY) || DEFAULT_THEME_MODE);
  if (currentValue === THEME_MODE_DARK) {
    setThemeMode(THEME_MODE_LIGHT);
  } else {
    setThemeMode(THEME_MODE_DARK);
  }
}

const initPage = () => {
  syncBodyClassList();
}

initPage();
</script>

切换主题
//主题模式键名
const LS_THEME_KEY=“THEME_mode”；
//可能的主题模式本地存储值
const-THEME\u-MODE\u-LIGHT=0；
const-THEME\u-MODE\u-DARK=1；
//暗模式激活时应用的类
const BODY_DARK_MODE_CLASS=“DARK MODE”；
//默认主题
常量默认主题模式=主题模式；
//查找当前主题模式并修改主体
//相应地标记类列表。
常量syncBodyClassList=（设置值）=>{
const currthemode=setValue！==undefined？setValue:parseInt（localStorage.getItem（LS_THEME_KEY）|默认_THEME_模式）；
if（currtemode===主题\u模式\u暗）{
//打开黑暗主题
document.body.classList.add（body\u DARK\u MODE\u CLASS）；
}否则{
//关闭黑暗主题
document.body.classList.remove（body\u DARK\u MODE\u CLASS）；
}
};
const setThemeMode=（模式）=>{
setItem（LS_主题键，模式）；
syncBodyClassList（模式）；
}
//切换当前主题并将其保存到本地存储
函数toggleMode（）{
const currentValue=parseInt（localStorage.getItem（LS_THEME_KEY）| |默认_THEME_模式）；
如果（currentValue==主题模式暗）{
设置主题模式（主题模式灯）；
}否则{
设置主题模式（主题模式）；
}
}
常量初始化页=（）=>{
syncBodyClassList（）；
}
initPage（）；

我认为最好将其解压缩到css文件中，并将主题存储在localstorage中，如下所示：localstorage.setItem（'theme'，'dark theme.css'）；我会保存它，看看它是否有效。谢谢你的帮助！：）谢谢，成功了！我很难找到正确的代码，因为我对脚本的工作方式有点陌生。再次感谢您的快速响应！：）

<button onclick="toggleMode()">Toggle theme</button>

<script>
// Theme mode key name
const LS_THEME_KEY = "theme_mode";
// Possible theme mode local storage values
const THEME_MODE_LIGHT = 0;
const THEME_MODE_DARK = 1;
// Class to be applied when dark mode is active
const BODY_DARK_MODE_CLASS = "dark-mode";
// Default theme
const DEFAULT_THEME_MODE = THEME_MODE_DARK;

// Look up current theme mode and modify the body
// tag class list accordingly.
const syncBodyClassList = (setValue) => {
  const currThemeMode = setValue !== undefined ? setValue : parseInt(localStorage.getItem(LS_THEME_KEY) || DEFAULT_THEME_MODE);
  if (currThemeMode === THEME_MODE_DARK) {
    // turn the dark theme on
    document.body.classList.add(BODY_DARK_MODE_CLASS);
  } else {
    // turn the dark theme off
    document.body.classList.remove(BODY_DARK_MODE_CLASS);
  }
};

const setThemeMode = (mode) => {
  localStorage.setItem(LS_THEME_KEY, mode);
  syncBodyClassList(mode);
}

// Toggle current theme and save it into the local storage
function toggleMode() {
  const currentValue = parseInt(localStorage.getItem(LS_THEME_KEY) || DEFAULT_THEME_MODE);
  if (currentValue === THEME_MODE_DARK) {
    setThemeMode(THEME_MODE_LIGHT);
  } else {
    setThemeMode(THEME_MODE_DARK);
  }
}

const initPage = () => {
  syncBodyClassList();
}

initPage();
</script>