Question

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

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

此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 Storage而不是Cookie？我对如何正确解决这个问题没有更多的想法。

谢谢！

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

将按钮切换状态存储在Cookie（或可能的会话存储）中的最佳方法？

1 个答案: