将按钮切换状态存储在 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 插件，甚至可能使用 Session Storage 而不是 cookie？我对如何做到这一点没有更多的想法。

谢谢！

Answer 1

你已经很接近了...唯一要添加的就是读取加载时的 cookie。

您在 addClass() 上打错字了，需要大写。

另一件重要的事情，当您定义$('body.light #night-mode') 并且主体没有加载类时...未设置处理程序。所以只需定义$('#night-mode').click(function() { 并使用一些条件来检查body 是否有一个类...

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