javascript - 如何在浏览器中保存暗模式值(使用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: '/'
});

FiddleTest