我使用復選框來切換使用 HTML、CSS 和 JS 的黑色和深色主題顏色。我的導航欄中有這個代碼。它運行良好。但是一旦重繪 或更改為網站內的其他頁面，它就不再保持黑暗。
<div>
<input type="checkbox" class="checkbox" id="chk" />
<label class="label" for="chk">
<i class="fas fa-moon"></i>
<i class="fas fa-sun"></i>
<div class="ball"></div>
</label>
</div>
有人提出了使用本地存盤的概念，我嘗試了這個，但它不起作用。
const chk = document.getElementById('chk');
chk.addEventListener('change', () => {
document.body.classList.toggle('dark');
});
// for checkbox remained checked
document.getElementById('chk')(function(){
var test = localStorage.input === 'true'? true: false;
document.getElementById('chk')('input').prop('checked', test || false);
});
document.getElementById('chk')('input').on('change', function() {
localStorage.input = document.getElementById('chk')(this).is(':checked');
console.log(document.getElementById('chk')(this).is(':checked'));
});
請有人幫助我。
PS：我不是網路開發人員。我的博客到處都使用 HTML 和 CSS。我正在使用 GitHub 頁面來托管我的網站。https://amatya-aditya.github.io/
uj5u.com熱心網友回復：
JavaScript 代碼的語法存在一些問題。檢查下面的更新代碼。
注意：document.getElementById() 不回傳函式
const chk = document.getElementById('chk');
chk.addEventListener('change', (e) => {
localStorage.setItem('dark-mode', e.target.checked);
if ( e.target.checked )
document.body.classList.add('dark');
else
document.body.classList.remove('dark');
});
window.addEventListener('load', () => {
let value = localStorage.getItem('dark-mode');
document.getElementById('chk').checked = value === 'true' ? true : false;
if ( value === 'true' )
document.body.classList.add('dark');
else
document.body.classList.remove('dark');
})
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/393475.html
標籤：javascript html 复选框 本地存储
上一篇：限制textarea中的換行符