时间戳

首页 > 解决方案 > 切换 localStorage 项目

javascript - 切换 localStorage 项目

问题描述

我想为我的 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 切换问题，但我找不到与我完全相同的问题。

标签： javascripthtmljquerylocal-storage

解决方案

您不能在 localStorage 中保留布尔值。这就是你有错误的原因。例如，尝试保留0forfalse和1for 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

推荐阅读