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

Answer 2

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

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

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

2 个答案: