Javascript 如何通过点击按钮在cookie中保存背景色？

我目前正在努力学习javascript中的cookies

我的问题是：我有三个按钮：红-绿-蓝，如果我点击红色，背景色红色应该保存在cookie中，这样我就可以重新加载红色的网页

document.cookie ="red";
document.cookie ="green";
document.cookie ="blue";
function BackgroundRed(){
document.cookie = "background-color=red";
}


<button onClick="BackgroundRed()" style="background-color:red">Rot</button>
<button onClick="alertCookie()" style="background-color:green">Grün</button>
<button onClick="alertCookie()" style="background-color:blue">Blau</button>

document.cookie=“红色”；
document.cookie=“绿色”；
document.cookie=“蓝色”；
函数背景（）{
document.cookie=“背景色=红色”；
}
腐烂
格林
布劳

您可以这样做：

window.addEventListener（'DOMContentLoaded'，function（）{
var cookieValue=getCookie（'backgroundColor'），
btns=document.queryselectoral（'.color btn'）；
if（cookieValue）{
setBackgroundColor（cookieValue）；
}
数组.from（btn）.forEach（函数（btn）{
btn.addEventListener（'click'，function（）{
var color=this.getAttribute（'data-color'）；
背景颜色（颜色）；
});
});
});
函数setBackgroundColor（颜色）{
document.body.style.backgroundColor=颜色；
setCookie（'backgroundColor'，颜色）；
}
函数getCookie（名称）{
var cookies=document.cookie.split（“；”），
cookie=cookies.find（函数（str）{return str.indexOf（name+'='）==0；}）；
如果（cookie）{
返回cookie.split（'='）[1]；
}
返回null；
}
函数setCookie（名称、值）{
document.cookie=name+'='+值；
}

body{背景：红色；}
按钮{填充：1em；}
[data color=“red”]{背景：红色；}
[data color=“blue”]{背景：蓝色；}
[data color=“green”]{背景：绿色；}

请表明您已尝试解决该问题并显示任何进展。为什么不尝试使用LocalStorages？非常感谢！它可以工作，但点击按钮时不会改变颜色。@TimurLüdemann它在这里工作：。您需要确保此脚本运行时DOM（HTML）已完全加载。尝试用以下命令包装第一个块（从

var cookieValue…

到

Array.from…

）：

window.addEventListener（'DOMContentLoaded'，function（）{/*将代码粘贴到此处*/}）。我编辑了我的答案，以反映这一变化。谢谢。。但现在他又跳回到只有红色。。重新加载时，它应该保持背景色，我在重新加载前单击。。例如，我单击绿色->重新加载页面->绿色是背景色编辑：可能是因为在本地它不起作用？@TimurLüdemann这是因为Chrome不接受以
file://
开头的URL上的cookie。您可以将其放在服务器上（以获取
http/s
url），也可以使用Firefox，Firefox允许在本地文件上使用cookie。@blex该cookie的过期日期是什么？代码中有设置吗？或者当前脚本会永远保存它直到cookie消失？例如，如何将其设置为1年？谢谢