如何在瀏覽器中保存暗模式值（使用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');
}