Question

请放手，我想为我的黑暗模式做本地存储。

这里是我的代码。请帮助添加本地存储：

HTML

<div class='KaXTamSwitch'>Dark
<input class='tgl tgl-KaXTam' id='KaXTamNight' type='checkbox'/>
<label class='tgl-btn' for='KaXTamNight'/></div>

JS

$('#KaXTamNight').click(function(){
    if ($('#KaXTamNight').is(':checked')) {
    $("body").addClass('KaXTamNight');
    }else {
    $("body").removeClass('KaXTamNight');
    }   
    });

我的CSS就位。

我只需要将Localstorage的功能添加到javascript中。

Answer 1

只需选中/取消选中该框，并在页面加载时将其添加到本地存储中，然后将其保存并设置类（如果以前保存的话）

签入JSFiddle：https://jsfiddle.net/f7jqwmto/

$(() => {
  const theme = 'KaXTamNight';
  const darkMode = localStorage.getItem(theme);
  $('body').toggleClass(theme, darkMode === 'true');

  $('#' + theme).prop('checked', darkMode === 'true').click(function() {
    $("body").toggleClass(theme, $(this).is(':checked'));
    localStorage.setItem(theme, String($(this).is(':checked')));
  });
});

.KaXTamNight {
  background-color: #777;
}

<div class='KaXTamSwitch'>Dark
  <input class='tgl tgl-KaXTam' id='KaXTamNight' type='checkbox' />
  <label class='tgl-btn' for='KaXTamNight' />
</div>

如何使用Javascript将暗模式添加到本地存储

1 个答案: