将 css 文件的选择保存到 LocalStorage，在刷新或重新打开页面时记住此选项

Question

我已经尝试了无数的事情，我的头脑麻木了，试图从其他问题和教程中找到解决方案，我可以对此有新的看法吗？基本上，我有一个按钮可以在两个 css 文件之间切换(用于暗模式(，由于与 IE11 不兼容，我不使用 CSS 变量。

它需要记住选择，当页面加载时，它应该根据记住的内容加载。

这是我的javascript：

var defaultSS = './css/custom.css',
altSS = './css/custom-dark.css',
hrefAttr;
$('#css_toggle').click(function () {
$('link').each(function(){
hrefAttr = $(this).attr('href');
if (hrefAttr.indexOf(defaultSS) >= 0) {
$(this).attr('href', altSS);
console.log('Was:',hrefAttr);
console.log('Now:',$(this).attr('href'));
} else if (hrefAttr.indexOf(altSS) >= 0) {
$(this).attr('href', defaultSS);
console.log('Was:',hrefAttr);
console.log('Now:',$(this).attr('href'));
document.cookie = $(this).attr('href');
}
});
});

和按钮：

<button class="themetoggle-button" id="css_toggle">Theme Toggle</button>

任何帮助都非常感谢！！

Answer 1

使用localStorage.setItem(name, value)为深色模式设置标志，然后在页面加载后检查此标志是否truelocalStorage.getItem(name)

如果这是真的，我们只需运行在单击函数中找到的相同代码

let defaultSS = './css/custom.css';
let altSS = './css/custom-dark.css';
$(window).on('load', () => {
if (localStorage.getItem('dark-mode') === 'true') {
$('link').each(function() {
let href = $(this).attr('href');
if (href.includes(defaultSS)) {
$(this).attr('href', altSS);
}
})
}
});
$('#css_toggle').click(function() {
$('link').each(function() {
let href = $(this).attr('href');
if (href.includes(defaultSS)) {
// Dark mode
$(this).attr('href', altSS);
localStorage.setItem('dark-mode', 'true');
console.log('Was:', href);
console.log('Now:', $(this).attr('href'));
} else if (href.includes(altSS)) {
// Light mode
$(this).attr('href', defaultSS);
localStorage.setItem('dark-mode', 'false');
console.log('Was:', href);
console.log('Now:', $(this).attr('href'));
}
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="themetoggle-button" id="css_toggle">Theme Toggle</button>
<link rel="stylesheet" type="text/css" href="./css/custom.css">

---