本地存储不断返回错误答案

【问题标题】：Localstorage keeps returning false本地存储不断返回错误
【发布时间】：2022-11-11 20:56:03
【问题描述】：

每当我设置本地存储项目时，只要我尝试从第一行获取项目，它就会一直返回为 false。为什么会这样？每当darkMode 为真时，存储应该返回真，但它返回假。当我刷新页面时，它应该控制台日志add yes

const json = localStorage.getItem("dark_mode")
const currentMode = JSON.parse(json)

let darkMode = true;

if(currentMode) {
    darkMode = true

} else {
    darkMode = false
}

setDark(darkMode)

function setDark() {

if(darkMode) {
    console.log('add yes')
  } else {
    console.log('add no')
  }

  localStorage.setItem("dark_mode", JSON.stringify(darkMode))

}

【问题讨论】：

您的变量 darkMode 几乎没有用，只会增加不必要的复杂性，您只能使用 currentMode
我使用darkMode 添加或删除暗类
不必要的。你只需要一个变量而不是两个。

标签： javascript local-storage

【解决方案1】：

不要增加不必要的复杂性。仅使用一个有意义的变量：isDarkMode是-前缀表示布尔类型。

此外，当第一次获取 localStorage 值时，请确保使用倒退使用Nullish coalescing operator ?? - 防止 JSON.parse 给你一个字符串值"undefined"，它本身总是评估为true。

let isDarkMode = JSON.parse(localStorage.dark_mode ?? false);

const toggleDarkMode = () => {
  // Toggle boolean
  isDarkMode = !isDarkMode; 
  // Test
  console.log(`Mode is: ${isDarkMode ? "dark" : "light"}`);
  // Store new mode
  localStorage.dark_mode = JSON.stringify(isDarkMode);
  // Return the new mode
  return isDarkMode;
}

// Toggle whenever is needed
toggleDarkMode();

// If you want to know the new mode either just check using
// console.log(isDarkMode)
//
// or directly:
// const newMode = toggleDarkMode();
// console.log(newMode)

处理暗模式的一些额外资源：

Dark mode flickers

【讨论】：