javascript 如何在localStorage中切换状态

xu3bshqb 于 2023-05-12 发布在 Java

关注(0)|答案(2)|浏览(123)

我第一次尝试使用localStorage来切换黑暗模式状态。我正在努力让它工作时，刷新和更改页面。
任何帮助我的代码，以理解我的错误将不胜感激。

if(!localStorage.getItem('status')) {
      localStorage.setItem('status', 'light');
    }

dmToggle.onclick = () => {
  if (localStorage.getItem('status') === 'light') {
    makeDark();
    localStorage.setItem('status', 'dark');
  } else if (localStorage.getItem('status') === 'dark') {
    makeLight();
    localStorage.setItem('status', 'light');
  }
}

当前状态仅在第二次单击后切换，并且页面在刷新或页面切换时恢复到轻模式。

JavaScript

来源：https://stackoverflow.com/questions/76217778/how-to-toggle-a-status-in-localstorage

2条答案

按热度按时间

lhcgjxsq1#

if (localStorage.getItem("status") === "dark") {
  makeDark();
} else {
  makeLight();
}

dmToggle.onclick = () => {
  if (localStorage.getItem('status') === 'light') {
    makeDark();
    localStorage.setItem('status', 'dark');
  } else {
    makeLight();
    localStorage.setItem('status', 'light');
  }
}

解决了！
在调试时，我注意到页面加载时的“状态”是正确的，但没有被初始化。
谢谢你的帮助！

赞(0）回复(0）举报 2023-05-12

ncecgwcz2#

这是你想要实现的工作版本：

const THEME_KEY = 'status';

function getThemeFromStorage() {
    return localStorage.getItem(THEME_KEY);
}

function setThemeToStorage(themeName) {
    localStorage.setItem(THEME_KEY, themeName);
}

function setTheme(themeName) {
  setThemeToStorage(themeName);
  document.querySelector('#targetEl').classList.value = themeName;
}

// Init. Default to 'light'
setTheme(getThemeFromStorage() || 'light');

document.querySelector('#button').onclick = () => {
    setTheme(getThemeFromStorage() === 'light' ? 'dark' : 'light');
}

div {
  width: 100px;
  height: 100px;
}

.dark {
  background: #000;
}

.light {
  background: #ccc;
}

<div id="targetEl"></div>
<button id="button">Toggle theme</button>

你可以试试here

赞(0）回复(0）举报 2023-05-12

我来回答

javascript 如何在localStorage中切换状态

2条答案

相关问题

热门标签

最新问答