我有一个网站，它具有允许用户更改背景颜色的功能，我想制作一个 cookie，在具有此功能的所有页面上保留当前的颜色选择。我不确定我会如何去做这件事。我过去曾使用过 cookie，但那是几年前的事了，我无法再访问该代码，这意味着我无法重新利用它来满足我当前的需求。
下面的代码显示了我用来更改背景和文本颜色的 HTML 和 JavaScript:
<form id="color_change_form" name="color_change_form" method="post">
<label for="color_change">Select Background Colour</label>
<select name="color_change_dd" id="color_change_dd">
<option value="#ffffff">White</option>
<option value="#000000">Black</option>
<option value="#CFBD1F">Yellow</option>
<option value="#B9B537">Celery</option>
<option value="#92A62B">Grass</option>
<option value="#7FA78F">Jade</option>
<option value="#73A8BA">Aqua</option>
<option value="#7694B6">Sky</option>
<option value="#8A759C">Purple</option>
<option value="#BB5988">Magenta</option>
<option value="#CDACA5">Pink</option>
<option value="#CFA34A">Orange</option>
<option value="#C5BAB4">Grey</option>
</select>
<input type="button" name="color_change_confirm" id="color_change_confirm" value="Set" onclick="myFunction()" />
</form>
<script>
function myFunction() {
var e = document.getElementById("color_change_dd");
var strUser = e.options[e.selectedIndex].value;
document.body.style.backgroundColor = strUser;
localStorage["bgcolor"] = strUser;
// document.getElementById("current_color").innerHTML = strUser;
}
</script>
<form id="text_change_form" name="text_change_form" method="post">
<label for="text_change">Select Text Colour</label>
<select name="text_change_dd" id="text_change_dd">
<option value="#000000">Black</option>
<option value="#ffffff">White</option>
<option value="#CFBD1F">Yellow</option>
<option value="#B9B537">Celery</option>
<option value="#92A62B">Grass</option>
<option value="#7FA78F">Jade</option>
<option value="#73A8BA">Aqua</option>
<option value="#7694B6">Sky</option>
<option value="#8A759C">Purple</option>
<option value="#BB5988">Magenta</option>
<option value="#CDACA5">Pink</option>
<option value="#CFA34A">Orange</option>
<option value="#C5BAB4">Grey</option>
</select>
<input type="button" name="text_change_confirm" id="text_change_confirm" value="Set" onclick="myFunction2()" />
</form>
<script>
function myFunction2() {
var e = document.getElementById("text_change_dd");
var strUser = e.options[e.selectedIndex].value;
document.body.style.color = strUser;
localStorage["textcolor"] = strUser;
// document.getElementById("current_color").innerHTML = strUser;
}
</script>
如果有人能为所需的解决方案提供一些示例 JavaScript 代码，我将不胜感激。
预先感谢大家的帮助!
最佳答案
我本来建议使用localStorage，而您似乎正在这样做。
像这样完成您的 localStorage 实现；在这里，我向 document.body.onload 监听器添加了对 myFunction2 的调用，并从 localStorage 加载了颜色:
<html>
<head>
<title>Title of the document</title>
</head>
<body onload="myFunction2()">
<!-- <input type="text" id="start" placeholder="start"><br> <input type="text" id="end"><br> <button id ="generate" onclick="run()">Click to Generate</button> -->
<form id="text_change_form" name="text_change_form" method="post">
<label for="text_change">Select Text Colour</label>
<select name="text_change_dd" id="text_change_dd">
<option value="#000000">Black</option>
<option value="#ffffff">White</option>
<option value="#CFBD1F">Yellow</option>
<option value="#B9B537">Celery</option>
<option value="#92A62B">Grass</option>
<option value="#7FA78F">Jade</option>
<option value="#73A8BA">Aqua</option>
<option value="#7694B6">Sky</option>
<option value="#8A759C">Purple</option>
<option value="#BB5988">Magenta</option>
<option value="#CDACA5">Pink</option>
<option value="#CFA34A">Orange</option>
<option value="#C5BAB4">Grey</option>
</select>
<input type="button" name="text_change_confirm" id="text_change_confirm"
value="Set" onclick="myFunction2()" />
</form>
<script>
function myFunction2() {
var e = document.getElementById("text_change_dd");
var strUser = e != null && e.selectedIndex ?
e.options[e.selectedIndex].value :
localStorage["textcolor"];
if(strUser) {
document.body.style.color = strUser;
localStorage["textcolor"] = strUser;
}
// document.getElementById("current_color").innerHTML = strUser;
}
</script>
</body>
</html>您使用 localStorage 而不是 cookie 的原因是因为 localStorage 必须由用户手动清除或由网页覆盖，而 cookie 可能会过期或在服务器端被删除，因此耐用性稍差。 Cookie 也会在服务器和客户端之间来回传输，因此如果数据只需要对客户端重要，请使用 localStorage 或 sessionStorage。
通常，如果某些状态与用户首选项有关，则 Web 存储是最佳选择(因为服务器根本不需要此信息)。
如果您需要跟踪状态(即用户在此页面上单击此、用户以此身份登录、用户完成了该过程的这一部分等)，请使用 cookie。
关于javascript - 需要帮助创建可保留当前背景和文本颜色的 cookie，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59721304/