使用 JavaScript 更改 HTML 本地存储图标和暗模式答案

【问题标题】：HTML Local Storage Icon Change and Dark Mode with JavaScript使用 JavaScript 更改 HTML 本地存储图标和暗模式
【发布时间】：2020-08-29 15:34:15
【问题描述】：

我用我自己的深色主题制作了一个深色模式按钮。主题由本地存储保存。此外，当我单击按钮时，它的图标会发生变化（月亮到太阳）。但是，如果我重新加载页面，该站点仍处于黑暗模式，但按钮图标又是月亮。所以这里有一个链接，如果你不明白我在说什么，它会告诉你问题。 (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>

【问题讨论】：

标签： javascript html css icons local-storage

【解决方案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');
    }
});

【讨论】：