Javascript 通过切换类使用webStorage应用CSS_Javascript_Html_Css_Web Storage

Javascript 通过切换类使用webStorage应用CSS

javascript html css

Javascript 通过切换类使用webStorage应用CSS,javascript,html,css,web-storage,Javascript,Html,Css,Web Storage,我有一个带有2个按钮的站点，我用它在[默认]暗主题和亮主题之间切换。我使用：root指令和CSS变量执行此操作，如下所示： HTML: JS: 这适用于单页。现在，我希望在导航到同一域中的另一个网页时，主题保持不变。我不想使用cookie，也不想在客户端存储持久数据，因此我认为sessionStorage最适合这种情况。我已经在HTML和JS中添加了setItem，但是使用这个sessionStorage值切换light类时遇到了困难（我甚至不确定这是使用webStorage时的最佳做法？）。以

我有一个带有2个按钮的站点，我用它在[默认]暗主题和亮主题之间切换。我使用

：root

指令和CSS变量执行此操作，如下所示：

HTML:

JS:

这适用于单页。现在，我希望在导航到同一域中的另一个网页时，主题保持不变。我不想使用cookie，也不想在客户端存储持久数据，因此我认为

sessionStorage

最适合这种情况。我已经在HTML和JS中添加了

setItem

，但是使用这个

sessionStorage

值切换

light

类时遇到了困难（我甚至不确定这是使用webStorage时的最佳做法？）。以下是我的出发点：

HTML:

JS:

使用webStorage将

类

应用于HTML

正文

的最佳实践是什么？

除了嵌入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>


var theme=sessionStorage.getItem（“主题”）；
var元素=document.body；
如果（主题和主题==='light'）{
元素.classList.add（“light”）；
}
否则{
元素。类列表。移除（“灯光”）；
}

实际上，这不适合我。我是否需要对我的JS或HTML进行其他调整？或者它需要本地存储吗？FWIW，这个

标记位于HTML标题中我的

样式表之后。不知道为什么这可能不起作用。。。这个解决方案很有意义，当我在控制台中运行命令时，它就工作了。这可能与页面加载方式有关吗？我也在运行jQuery和Bootstrap，以防万一（也在这个脚本标记之前加载）。将
标记放在样式表之前或之后并不重要，因为不管怎样都会应用该类。这里的问题应该是脚本
是在主体
元素之前定义的，因此它将无法访问文档.body
。将它放在主体中元素应该可以使它工作。工作！完美的抱歉弄错了。谢谢：）
:root {
    --bg-color-1: #011627;
}

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

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

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

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

<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>

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

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

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

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");
}

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