L'idée est que j'ai un mode sombre, j'en ai fini avec ça, mais le problème, quand je recharge la page, le mode sombre est parti

C'est du code HTML

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

Et c'est du code js ( avec cette façon ne fonctionne pas )

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');

      }

  });   

Merci !

0
user11220087 18 mars 2019 à 13:41

2 réponses

Meilleure réponse

Vous devez ajouter quelque chose comme:

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

Il vérifiera si le cookie existe et s'il existe, puis définira le mode sombre.

Modifier

Si vous souhaitez supprimer le cookie lorsque vous décochez la case, utilisez

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

FiddleTest

2
Carsten Løvbo Andersen 18 mars 2019 à 10:51

Vous pouvez lire cookie du document, vérifier si la propriété darkMode est présente à l'aide d'une expression régulière et ajouter la classe dark-mode à la body

if(document.cookie.match(/^(.*;)?\s*darkMode\s*=\s*[^;]+(.*)?$/)) {
  $('body').addClass('dark-mode');
}
0
Vadim 18 mars 2019 à 12:37