我正在开发一个网站，您可以在其中设置“深色模式”，但是当我访问它或刷新它时，它总是将其设置回浅色版本。无论如何，他们的选择是否可以设置/保存在设备上。
<button onclick="document.body.style.backgroundColor = '#2e2e2e'">Dark Mode</button>
<button onclick="document.body.style.backgroundColor = 'white'">Light Mode</button>
这就是我目前的全部，直到我想出如何保存该选择。
最佳答案
使用 JavaScript Cookie
所有代码在这里
注意:我使用的 Cookie 的名称是:bodyColor；
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Testing Page</title>
</head>
<body onload="setbodycolor()">
<p>Testing Page</p>
<button onclick="setbodyBGDarkColor();setCookieDark()">Dark Mode</button>
<button onclick="setbodyBGWhileColor();setCookieWhite()">Light Mode</button>
<script>
function setbodyBGDarkColor(){
document.body.style.backgroundColor = '#2e2e2e'
}
function setbodyBGWhileColor(){
document.body.style.backgroundColor = 'white'
}
function setCookieDark(){
document.cookie="bodyColor=#2e2e2e;expires=Wed, 18 Dec 2023 12:00:00 GMT"
}
function setCookieWhite(){
document.cookie="bodyColor=#ffffff;expires=Wed, 18 Dec 2023 12:00:00 GMT"
}
function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
function setbodycolor(){
var bodyc=getCookie("bodyColor");
document.body.style.backgroundColor = ""+bodyc;
}
</script>
</body>
</html>
我认为这对您来说是更好的解决方案。
关于javascript - 无论如何要保存背景图像，以便在重新加载时保存您的选择，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59023411/