切换 localStorage 项目答案

【问题标题】：Toggling localStorage item切换 localStorage 项目
【发布时间】：2020-11-15 19:38:30
【问题描述】：

我想为我的 localStorage 创建一个切换功能，因为我试图在我的网站上安装暗模式，我希望它记住用户的选择。

我希望它在页面加载时加载当前首选项（如果已设置），然后在单击时切换状态。我的代码如下 - 但是我在尝试切换 localStorage 状态时显然犯了一些错误。

// ON PAGE LOAD, IF USER PREFERS DARK, ADD DARK CLASS TO HTML
if (window.localStorage.getItem('preferDark')) {
     $('html').toggleClass('dark');
   }

// TOGGLE STATE ON CLICK
$('.wrapper').click(function(){
  if (window.localStorage.getItem('preferDark', true)) {
    window.localStorage.setItem('preferDark', false);  
} else {
    window.localStorage.setItem('preferDark', true); 
  }
  $('html').toggleClass('dark');
});

我知道有各种各样的 localStorage 切换问题，但我找不到与我完全相同的问题。

【问题讨论】：

“但是我在尝试切换 localStorage 状态时显然犯了一些错误”，究竟是什么让你这么说？你期望会发生什么？实际发生了什么？
这能回答你的问题吗？ Cannot set boolean values in LocalStorage? 基本上，你不能在本地存储中存储布尔值，只能存储字符串
@WesleySmith 它是真的，然后是假的，然后是假的。我希望它在真假之间来回切换

标签： javascript html jquery local-storage

【解决方案1】：

您不能在 localStorage 中保留布尔值。这就是你有错误的原因。例如，尝试保留 0 代表 false 和 1 代表 true。但请记住，localStorage 也不能保留整数 - 您可以传递整数或布尔值，但它将被转换为字符串。试试这个：

if (+window.localStorage.getItem("preferDark")) {
  $("html").toggleClass("dark");
}

$(".wrapper").click(function () {
  if (+window.localStorage.getItem("preferDark")) {
    window.localStorage.setItem("preferDark", 0);
  } else {
    window.localStorage.setItem("preferDark", 1);
  }
  $("html").toggleClass("dark");
});

注意：我在从localStorage获取值之前使用+符号将其转换为Number

【讨论】：