在浏览整个网站时保持复选框被选中

Question

我使用 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/

Answer 1

JavaScript 代码的语法存在一些问题。检查下面的更新代码。

注意：document.getElementById() 不是 return 函数

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');
})

在浏览整个网站时保持复选框被选中

To keep the checkbox checked once checked while browsing entire website

html

javascript

checkbox

local-storage