使用 webStorage 通过切换 Class 来应用 CSS

Question

我有一个带有 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");
}

这适用于单页。现在，我想让主题在导航到同一域内的另一个网页时保持不变。我不想使用 cookie，也不想在客户端存储持久数据，所以我认为 sessionStorage 最适合这个。我在我的 HTML 和 JS 中添加了 setItem，但是我很难使用这个 sessionStorage 值来切换 light class（我什至没有确定这是使用 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 的最佳做法是什么？

Answer 1

除了 html 中嵌入的脚本外，一切都很好。它总是会用 'dark' 值覆盖您选择的主题。所以只需更改此脚本以读取会话存储中的当前值并应用适当的 class.

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

使用 webStorage 通过切换 Class 来应用 CSS

Using webStorage to apply CSS by Toggling Class

html

javascript

css

web-storage