HTML 本地存储图标更改和暗模式 JavaScript

Question

我用自己的深色主题制作了一个深色模式按钮。主题由本地存储保存。此外，当我单击该按钮时，它的图标也会发生变化（从月亮到太阳）。但是，如果我重新加载页面，该网站仍处于黑暗模式，但按钮图标又变成了月亮。所以这里有一个 link，如果你不明白我在说什么，它会告诉你问题所在。 (https://postimg.cc/yg6Q3vq0) 还有我的代码：

//This is the darkmode script. 
function darkmode() {
  const wasDarkmode = localStorage.getItem('darkmode') === 'true';
  localStorage.setItem('darkmode', !wasDarkmode);
  const element = document.body;
  element.classList.toggle('dark-mode', !wasDarkmode);

}
function onload() {
  document.body.classList.toggle('dark-mode', localStorage.getItem('darkmode') === 'true');
}
//End
//And this is the code which change the button's icon
$('button').on('click', fav);

function fav(e) {
  $(this).find('.fa').toggleClass('fa-moon-o fa-sun-o');
}
//So I would like to combine the 2 codes. I mean to add the icon code to Local Storage.

.card {
  color: yellow;
  background-color: blue;
  
}

.dark-mode .car {
  color: blue;
  background-color: yellow;
}

<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<a style="padding: 0 !important;"><button class="darkmode" onclick="darkmode()"><i class="fa fa-moon-o"></i></button></a>

<div class="card">
<h1>Title</h1>
<p>Text<//p>
<h2>Another text..</h2>
</div>

</body>
</html>

Answer 1

浏览器只按写入的方式呈现 HTML。您的 HTML 说要呈现 <i class="fa fa-moon-o"></i>，所以这就是浏览器显示的内容。换句话说，它会默认显示月亮图标。

您需要对页面加载执行某种检查以查看是否应更改图标。

类似这样的方法可能有效：

// when the document is ready
$(document).ready(function () {
    // check if dark mode is enabled
    if (localStorage.getItem('darkmode') === 'true') {
        // if it is, change the moon icon to a sun icon
        ('.fa').toggleClass('fa-moon-o fa-sun-o');
    }
});

HTML 本地存储图标更改和暗模式 JavaScript

HTML Local Storage Icon Change and Dark Mode with JavaScript

html

javascript

css

icons

local-storage