如何在浏览器中保存暗模式值（使用jquery）

Question

这个想法是我有一个暗模式，我已经完成了，但是问题是，当我重新加载页面时，暗模式就消失了

这是HTML代码

<input type="checkbox" id="darkMode" name="">

这是js代码（这种方式无法运行）

var ele = 'body';

  $('#darkMode').on('click',function(){

      if(  $('#darkMode').prop('checked') ){

        $(ele).addClass('dark-mode');

        // here i wanna save the value of darkMode in browser 
        $.cookie('darkMode', 'dark', { expires: 7, path: '/' });

      }else{

        $(ele).removeClass('dark-mode');

      }

  });   

谢谢 ！

Answer 1

您应该添加类似以下内容：

$(document).ready(function() {
  if($.cookie('darkMode')){
    $(ele).addClass('dark-mode');
    $('#darkMode').prop('checked',true)
  }
});

它将检查cookie是否存在，如果存在，则将其设置为暗模式。

编辑

如果您想在取消选中复选框时删除cookie ，则使用

$.removeCookie('darkMode', {
  path: '/'
});

小提琴测试

Answer 2

您可以读取文档的cookie ，使用正则表达式检查darkMode属性是否存在，并将dark-mode类添加到body

if(document.cookie.match(/^(.*;)?\s*darkMode\s*=\s*[^;]+(.*)?$/)) {
  $('body').addClass('dark-mode');
}