我有一个带有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，但是很难使用此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将class应用于HTML body的最佳实践是什么？