使用jQuery存储主题颜色[duplicate]

5q4ezhmt 于 2023-01-08 发布在 jQuery

关注(0)|答案(1)|浏览(116)

- 此问题在此处已有答案**：

Keep Class toggled after Page Refresh（2个答案）
19天前关闭。
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');
 })

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

jquery

来源：https://stackoverflow.com/questions/74851037/store-theme-colour-with-jquery

1条答案

按热度按时间

eqqqjvef1#

使用本地存储。

$('.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类重新应用于主体。

赞(0）回复(0）举报 2023-01-08

我来回答

使用jQuery存储主题颜色[duplicate]

1条答案

相关问题

热门标签

最新问答