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

Question

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

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

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

同样，如果 cookie 已经存在（或者如果 body 标签已经有 class .dark），按钮应该做完全相反的事情——点击它应该删除 class .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 插件，甚至可能使用会话存储而不是 cookie？我不知道如何正确处理这个问题。

谢谢！

Answer 1

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

你在 addClass() 需要大写的地方打错了字。

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

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（或可能是会话存储）中的最佳方式？

Best way to store a button toggle state in a Cookie (or possibly Session Storage)?

javascript

cookies

jquery

session-storage

session-cookies