Question

我正在尝试使用localStorage在我的网站上保存暗模式首选项。我遇到的问题是当您切换到黑暗模式并单击刷新时，它仍然处于黑暗模式。但是，如果您切换到黑暗模式，然后又回到明亮模式，然后单击刷新，它将加载黑暗模式。

到目前为止，我一直处于困境，还没有找到任何有用的资源。

这是我的小提琴以及下面的js脚本。

 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
 <script type="text/javascript">
  $(document).ready(function(){
   $('ul').click(function(){
    $('ul').toggleClass('active')
    let darkThemeEnabled = $('section').toggleClass('dark');
    localStorage.setItem('dark-theme-enabled', darkThemeEnabled);
   })
  })

    if (localStorage.getItem('dark-theme-enabled')) {
        $('section').toggleClass('dark');
      $('ul').toggleClass('active') 
    }
 </script>

Answer 1

您可以使用localStorage保存并获取它：

$(document).ready(function() {
  var darkMode = localStorage.getItem('dark') || false;
  $('ul').click(function() {
    $('ul').toggleClass('active')
    $('section').toggleClass('dark');
    darkMode = !darkMode;
    localStorage.setItem("dark", darkMode);
  });
});

要回答第二个问题-不，您需要在要执行此操作的每个页面上包含脚本。

保存用户的暗模式首选项时出现问题

1 个答案: