我如何在暗模式切换中使用 localStorage?
How can i use localStorage in a dark mode toggle?
我正在使用以下 javascript 代码通过 CSS 主题在深色模式和浅色模式之间切换,并且效果很好,但是当我添加 local.storage 时,浏览器会不保存模式首选项。我该怎么做?
HTML:
<button id="darkmode" type="button" onclick="toggleDark()">
<span id="night" class="material-icons">mode_night </span>
<span id="light" class="material-icons">light_mode</span>
</button>
CSS:
[data-theme="light"] {
--main-color: #dfdad8;
--sec-color: #202527;
--third-color: #6e6e65;
--one--color: #acf2be4d;
--two--color: #fdb8c052;
}
[data-theme="dark"] {
--main-color: #6e6e65;
--sec-color: #f5f5f5;
--third-color: #202527;
--one--color: #acf2bd;
--two--color: #fdb8c0;
}
Javascript:
function toggleDark() {
const container = document.body;
const dataTheme = container.getAttribute("data-theme");
let theme = localStorage.getItem("data-theme");
if (dataTheme === "light") {
container.setAttribute("data-theme", "dark");
document.getElementById("night").style.display = "block";
document.getElementById("light").style.display = "none";
localStorage.toggled("data-theme", "dark");
} else {
container.setAttribute("data-theme", "light");
document.getElementById("night").style.display = "none";
document.getElementById("light").style.display = "block";
localStorage.setItem("data-theme", "light");
}
}
编辑:
将您的 localStorage.toggled 更改为 localStorage.set
if (dataTheme === "light") {
container.setAttribute("data-theme", "dark");
document.getElementById("night").style.display = "block";
document.getElementById("light").style.display = "none";
localStorage.setItem("data-theme", "dark");
}
无论如何,您可能需要先检查 localStorage 是否存在以及您的“数据主题”是否存在。如果“数据主题”不存在,您应该设置一个默认值。
if (localStorage.getItem("data-theme") === null) {
//set default
}
->
我已经在 CodePen 中为您的代码创建了一个示例,它似乎运行良好:
https://codepen.io/Hkrie/pen/ZEXEReq
如果它仍然无法在您的计算机上运行,您可能已经禁用了 localStorage 或正在使用没有它的浏览器。 (一个可能的解决方法是改用 cookies -> https://www.w3schools.com/js/js_cookies.asp)
2 个问题:
-您的代码忽略了保存的值。
-localStorage.toggled不是东西
const container = document.body;
if(localStorage.getItem("data-theme")){
container.setAttribute("data-theme",localStorage.getItem("data-theme"));
toggleDark(1)
}
//actually use the saved value
function toggleDark(r) {//this function is executed when switching from the current theme to the other
const dataTheme = container.getAttribute("data-theme");
let theme_switch;
if(dataTheme === "light") {theme_switch = 1} else {theme_switch = 0}
if(r){theme_switch = !theme_switch}//so the oppisite of the theme stored is used when calling this function
if (theme_switch) {
container.setAttribute("data-theme", "dark");
document.getElementById("night").style.display = "block";
document.getElementById("light").style.display = "none";
localStorage.setItem("data-theme", "dark");
} else {
container.setAttribute("data-theme", "light");
document.getElementById("night").style.display = "none";
document.getElementById("light").style.display = "block";
localStorage.setItem("data-theme", "light");
}
}
如果以上代码不起作用,请尝试以下步骤。
打开控制台并执行:
localStorage.setItem("数据主题", "深色");
然后刷新页面,执行:
localStorage.getItem("数据主题")
如果它 returns 为空,则可能有某些东西阻止了您的 cookie。尝试检查您的设置。
我正在使用以下 javascript 代码通过 CSS 主题在深色模式和浅色模式之间切换,并且效果很好,但是当我添加 local.storage 时,浏览器会不保存模式首选项。我该怎么做?
HTML:
<button id="darkmode" type="button" onclick="toggleDark()">
<span id="night" class="material-icons">mode_night </span>
<span id="light" class="material-icons">light_mode</span>
</button>
CSS:
[data-theme="light"] {
--main-color: #dfdad8;
--sec-color: #202527;
--third-color: #6e6e65;
--one--color: #acf2be4d;
--two--color: #fdb8c052;
}
[data-theme="dark"] {
--main-color: #6e6e65;
--sec-color: #f5f5f5;
--third-color: #202527;
--one--color: #acf2bd;
--two--color: #fdb8c0;
}
Javascript:
function toggleDark() {
const container = document.body;
const dataTheme = container.getAttribute("data-theme");
let theme = localStorage.getItem("data-theme");
if (dataTheme === "light") {
container.setAttribute("data-theme", "dark");
document.getElementById("night").style.display = "block";
document.getElementById("light").style.display = "none";
localStorage.toggled("data-theme", "dark");
} else {
container.setAttribute("data-theme", "light");
document.getElementById("night").style.display = "none";
document.getElementById("light").style.display = "block";
localStorage.setItem("data-theme", "light");
}
}
编辑:
将您的 localStorage.toggled 更改为 localStorage.set
if (dataTheme === "light") {
container.setAttribute("data-theme", "dark");
document.getElementById("night").style.display = "block";
document.getElementById("light").style.display = "none";
localStorage.setItem("data-theme", "dark");
}
无论如何,您可能需要先检查 localStorage 是否存在以及您的“数据主题”是否存在。如果“数据主题”不存在,您应该设置一个默认值。
if (localStorage.getItem("data-theme") === null) {
//set default
}
->
我已经在 CodePen 中为您的代码创建了一个示例,它似乎运行良好: https://codepen.io/Hkrie/pen/ZEXEReq
如果它仍然无法在您的计算机上运行,您可能已经禁用了 localStorage 或正在使用没有它的浏览器。 (一个可能的解决方法是改用 cookies -> https://www.w3schools.com/js/js_cookies.asp)
2 个问题:
-您的代码忽略了保存的值。
-localStorage.toggled不是东西
const container = document.body;
if(localStorage.getItem("data-theme")){
container.setAttribute("data-theme",localStorage.getItem("data-theme"));
toggleDark(1)
}
//actually use the saved value
function toggleDark(r) {//this function is executed when switching from the current theme to the other
const dataTheme = container.getAttribute("data-theme");
let theme_switch;
if(dataTheme === "light") {theme_switch = 1} else {theme_switch = 0}
if(r){theme_switch = !theme_switch}//so the oppisite of the theme stored is used when calling this function
if (theme_switch) {
container.setAttribute("data-theme", "dark");
document.getElementById("night").style.display = "block";
document.getElementById("light").style.display = "none";
localStorage.setItem("data-theme", "dark");
} else {
container.setAttribute("data-theme", "light");
document.getElementById("night").style.display = "none";
document.getElementById("light").style.display = "block";
localStorage.setItem("data-theme", "light");
}
}
如果以上代码不起作用,请尝试以下步骤。
打开控制台并执行: localStorage.setItem("数据主题", "深色");
然后刷新页面,执行: localStorage.getItem("数据主题")
如果它 returns 为空,则可能有某些东西阻止了您的 cookie。尝试检查您的设置。