在Cookie (或可能的会话存储)中存储按钮切换状态的最佳方式？

Question

我正在尝试建立一个按钮，以切换黑暗模式的开关。

当用户单击按钮时，它应该将类.dark添加到body标记中，并将状态存储在cookie中。

应该为整个会话存储此cookie。在页面加载时，函数应检查此cookie是否存在，并将类.dark添加到主体标记中。

同样，如果cookie已经存在(或者如果body标记已经具有类.dark)，则按钮应该做的正好相反-单击它将从body中删除类.dark并删除cookie (或者更改它的值-以您认为更有意义的方式为准)。

我已经尝试过使用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插件，甚至可能使用会话存储而不是cookies？我对如何做好这件事没有更多的想法。

谢谢!

Answer 1

你们很接近..。剩下的唯一要添加的就是在加载时读取cookie。

你在addClass()上有一个打字错误，它需要大写。

另一件重要的事情是，当你定义$('body.light #night-mode')并且主体没有轻量级的类时……未设置处理程序。所以只需定义$('#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");
  }
});

你的updated Fiddle