將按鈕切換狀態存儲在Cookie（或可能的會話存儲）中的最佳方法？

Question

我正在嘗試建立一個按鈕來切換暗模式的開和關。

當用戶單擊按鈕時，應將.dark類.dark到body標簽並將狀態存儲在cookie中。

該cookie應該存儲在整個會話中。 在頁面加載時，函數應檢查此cookie是否存在，並將.dark類.dark到body標簽中。

同樣，如果cookie已經存在（或者body標記已經具有類.dark ），則按鈕應執行相反的操作-單擊它應從主體中刪除類.dark並刪除co​​okie（或更改其值） -對您而言更有意義的事物）。

我已經嘗試過使用jQuery插件js-cookie ，這是我到目前為止提出的代碼：

（以某種方式該代碼在這里什么也不做，並且在JSFiddle： Live Demo上更好地工作）

 // On initial page load, there is not yet a cookie // When the user clicks the button for the fist time, do this: $('#night-mode').click(function() { // create a cookie for darkmode state Cookies.set('_darkmode', 'Enabled'); // add class to body $('body').addClass('dark'); }); // If darkmode is already active, do this instead: $('body.dark #night-mode').click(function() { // remove set darkmode cookie, add lightmode cookie Cookies.remove('_darkmode'); Cookies.set('_lightmode', 'Enabled'); // remove darkmode class and add lightmode class to body $('body').removeclass('dark').addClass('light'); }); // If lightmode is already active, do this instead: $('body.light #night-mode').click(function() { // remove set darkmode cookie, add lightmode cookie Cookies.remove('_lightmode'); Cookies.set('_darkmode', 'Enabled'); // remove lightmode class and add darkmode class to body $('body').removeclass('light').addClass('dark'); }); 

 #night-mode { margin: 2em auto; display: block; } body { color: green; } body.dark { color: red; } body.light { color: blue; } p { text-align: center; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.1.3/js.cookie.min.js"></script> <button id="night-mode" class="night">Toggle</button> <p>Green = no cookie</p> <p>Red = dark mode is active</p> <p>Blue = light mode is active</p> 

由於一些我的業余大腦無法理解的明顯原因，這是行不通的。

所以我想問：實現這一目標的最佳方法是什么？ 可能沒有任何jQuery插件，甚至可能沒有Session Storage而不是Cookie？ 我沒有更多關於如何正確解決問題的想法。

謝謝！

Answer 1

您接近了……唯一需要添加的就是讀取加載中的cookie。

您在addClass()上有一個錯字，需要大寫addClass() 。

另一個重要的事情是，當您定義$('body.light #night-mode') ，主體在加載時沒有類light ...未設置處理程序。 因此只需定義$('#night-mode').click(function() {並使用一些條件來檢查主體是否具有類...

if(Cookies.get("_darkmode")=="Enabled"){
  $("body").addClass('dark');
  console.log("Cookie dark is set on load");
}
if(Cookies.get("_lightmode")=="Enabled"){
  $("body").addClass('light');
  console.log("Cookie dark is set on load");
}

// On initial page load, there is not yet a cookie
// When the user clicks the button for the fist time, do this:
$('#night-mode').click(function() {
  if($("body").hasClass("dark")){
    // remove set darkmode cookie, add lightmode cookie
    Cookies.remove('_darkmode');
    Cookies.set('_lightmode', 'Enabled');
    // remove darkmode class and add lightmode class to body
    $('body').removeClass('dark').addClass('light');
    console.log("Setted Cookie dark");
  }
  else if($("body").hasClass("light")){
    // remove set darkmode cookie, add lightmode cookie
    Cookies.remove('_lightmode');
    Cookies.set('_darkmode', 'Enabled');
    // remove lightmode class and add darkmode class to body
    $('body').removeClass('light').addClass('dark');
    console.log("Setted Cookie light");
  }else{
    // create a cookie for darkmode state
    Cookies.set('_darkmode', 'Enabled');
    // add class to body
    $('body').addClass('dark');
    console.log("Setted Cookie dark for the first time");
  }
});

您更新的小提琴