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

Question

我正在尝试构建一个可以打开和关闭暗模式的按钮。

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

应在整个 session 期间存储此 cookie。页面加载时，函数应检查此 cookie 是否存在并将类 .dark 添加到 body 标记。

同样，如果 cookie 已经存在(或者 body 标记已经具有 .dark 类)，则该按钮应该执行完全相反的操作 - 单击它应该删除 .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 存储而不是 cookie？我对如何解决这个问题没有更多的想法。

谢谢!

Answer 1

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

您在 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");
  }
});

您的updated Fiddle