使用jQuery存储主题颜色

Question

HTML部分

<div class="theme_toggle">
<div class="theme_toggle_light">
<img src="assets/images/light.png" alt="" class="theme_toggle_img">
</div>
<div class="theme_toggle_dark">
<img src="assets/images/dark.png" alt="" class="theme_toggle_img">
</div>
</div>

jquery部分

$('.theme_toggle_dark').click(function () {
$('body').attr('class', 'dark');
})
$('.theme_toggle_light').click(function () {
$('body').removeClass('dark');
})

我希望当我刷新页面时，如果dark类被添加到body中，它应该被存储，如果我按下删除dark类，那么它应该被删除。

Answer 1

使用本地存储

$('.theme_toggle_dark').click(function() {
$('body').addClass('dark');
localStorage.setItem('darkClass', 'true');
});
$('.theme_toggle_light').click(function() {
$('body').removeClass('dark');
localStorage.removeItem('darkClass');
});
// Check if the 'darkClass' item exists in local storage on page load
if (localStorage.getItem('darkClass') === 'true') {
$('body').addClass('dark');
}

当dark类被添加到主体中时，将本地存储中的darkClass项设置为true，当dark类被移除时，将该项从本地存储中移除。

在页面加载时，代码将检查本地存储中是否存在darkClass项，如果存在，则将dark类重新应用于主体。