时间戳

首页 > 解决方案 > 使用 webStorage 通过 Toggling Class 应用 CSS

javascript - 使用 webStorage 通过 Toggling Class 应用 CSS

问题描述

我有一个带有 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最适合这个。我已经添加setItem了我的 HTML 和 JS，但是在light使用这个sessionStorage值切换类时遇到了困难（而且我什至不确定这是使用 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 将 aclass应用于 HTML的最佳实践是body什么？

标签： javascripthtmlcssweb-storage

解决方案

一切都很好，除了嵌入在 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>

推荐阅读