使用 webStorage 通过 Toggling Class 应用 CSS答案

【问题标题】：Using webStorage to apply CSS by Toggling Class使用 webStorage 通过 Toggling Class 应用 CSS
【发布时间】：2023-03-03 15:04:02
【问题描述】：

我有一个带有 2 个按钮的网站，用于在 [默认] 深色和浅色主题之间切换。我正在使用 :root 指令和 CSS 变量来执行此操作，如下所示：

HTML：

<body>
  <div>
    Here is some text
  </div>

  <br/>

  <button type="button" onclick="lightToggle()">Light Theme</button>
  <button type="button" onclick="darkToggle()">Dark Theme</button>

</body>

CSS：

:root {
    --bg-color-1: #011627;
}

.light {
    --bg-color-1: #fbfbfb;
}

body {
    background-color: var(--bg-color-1);
}

JS：

function lightToggle() {
    var element = document.body;
    element.classList.add("light");
}

function darkToggle() {
    var element = document.body;
    element.classList.remove("light");
}

这适用于单页。现在，我希望在导航到同一域中的另一个网页时保持主题不变。我不想使用cookies，也不想在客户端存储持久数据，所以我认为sessionStorage 最适合这个。我已经在我的 HTML 和 JS 中添加了setItem，但是在使用这个sessionStorage 值切换light 类时遇到了困难（而且我什至不确定这是使用webStorage 时的最佳实践吗？）。这是我的出发点：

HTML：

<script>
  sessionStorage.setItem("theme", "dark");

</script>

<body>
  <div>
    Here is some text
  </div>
  <br />
  <button type="button" onclick="lightToggle()">Light Theme</button>

  <button type="button" onclick="darkToggle()">Dark Theme</button>

</body>

CSS（未修改）：

:root {
    --bg-color-1: #011627;
}

.light {
    --bg-color-1: #fbfbfb;
}

body {
    background-color: var(--bg-color-1);
}

JS：

function lightToggle() {
    var element = document.body;
    element.classList.add("light");

    sessionStorage.setItem("theme", "light");
}

function darkToggle() {
    var element = document.body;
    element.classList.remove("light");

    sessionStorage.setItem("theme", "dark");
}

使用 webStorage 将 class 应用于 HTML body 的最佳做法是什么？

【问题讨论】：

标签： javascript html css web-storage

【解决方案1】：

一切都很好，除了嵌入在 html 中的脚本。它总是会用“暗”值覆盖您选择的主题。因此，只需更改此脚本以读取会话存储中的当前值并应用适当的类。

    <script>
      var theme = sessionStorage.getItem("theme");
      var element = document.body;
      
      if(theme && theme === 'light'){
        element.classList.add("light");
      }
      else{
        element.classList.remove("light");
      }
    </script>

【讨论】：

实际上，这对我不起作用。我是否必须对我的 JS 或 HTML 进行其他调整？还是需要localStorage？
FWIW，这个<script> 标记出现在 HTML 标头中我的 stylesheet 之后。不知道为什么这可能不起作用......该解决方案很有意义，当我在console 中运行命令时，它可以工作。可能与页面加载方式有关吗？我也在运行 jQuery 和 Bootstrap，以防万一（也在这个脚本标签之前加载）。
在stylesheet 之前或之后放置<script> 标签并不重要，因为无论如何都会应用该类。这里的问题应该是script 是在body 元素之前定义的，因此它将无法访问document.body。将它放在 body 元素中应该可以工作。
有效！完美的！很抱歉混淆了。谢谢:)