我正在尝试创建一个从数组生成随机星码的网站（https://en.help.roblox.com/hc/en-us/articles/360026181292-Roblox-Star-Code），它是在职的。但我想添加一个设置功能，您可以在其中更改背景颜色，这也可以。但我想保存背景颜色，这样下次他们访问网站时背景颜色仍然存在。 代码：
<!DOCTYPE html>
<html>
<head>
<title>Starcode Selector</title>
<style>
body {
background-color: #999999; /* Default background color */
}
</style>
<style>
#Starcodeselector {
margin-left: 850px;
}
#Generate {
margin-left: 925px;
}
#code {
margin-left: 820px
}
</style>
</head>
<body>
<button id="settingsbutton" onclick="changeBackgroundColor()">
<img src="https://th.bing.com/th/id/OIP.bYjHRWzPofO43ZMBzzdVngHaHM?pid=ImgDet&rs=1" alt="settings" width="75" height="75">
</button>
<h1 id="Starcodeselector">Starcodeselector</h1>
<button onclick="generateCode()" id="Generate">Generate</button>
<div id="code"></div>
<script>
const starcodes = ["DV", "NOODLES", "OLIX", "LCLC", "LAUGH", "SCRIPTED", "REALKREEK"];
const colors = ["blue","green","red","pink","purple","black","yellow","#999999"];
let selectedColor = 0;
function changeBackgroundColor() {
document.body.style.backgroundColor = colors[selectedColor];
selectedColor = (selectedColor + 1) % colors.length;
}
function generateCode() {
const number = Math.floor(Math.random() * starcodes.length);
const code = "Use Starcode " + starcodes[number] + " when buying robux!";
document.getElementById('code').innerText = code;
console.log("color=" + selectedColor)
}
</script>
</body>
</html>
我尝试过使用 cookie 和本地存储，但网站崩溃并且按钮不起作用。
在浏览器中尝试一下：
const starcodes = ["DV", "NOODLES", "OLIX", "LCLC", "LAUGH", "SCRIPTED", "REALKREEK"];
const colors = ["blue","green","red","pink","purple","black","yellow","#999999"];
let selectedColor = 0;
function changeBackgroundColor() {
localStorage.setItem('selectedColorIndex', selectedColor);
document.body.style.backgroundColor = colors[selectedColor];
selectedColor = (selectedColor + 1) % colors.length;
}
function generateCode() {
const number = Math.floor(Math.random() * starcodes.length);
const code = "Use Starcode " + starcodes[number] + " when buying robux!";
document.getElementById('code').innerText = code;
console.log("color=" + selectedColor)
}
function restoreBackgroundColorFromLocalStorage() {
const lsColorIndex = localStorage.getItem('selectedColorIndex');
if (lsColorIndex !== null) {
selectedColor = Number(lsColorIndex);
changeBackgroundColor();
}
}
restoreBackgroundColorFromLocalStorage();body {
background-color: #999999; /* Default background color */
}<button id="settingsbutton" onclick="changeBackgroundColor()">
<img src="https://th.bing.com/th/id/OIP.bYjHRWzPofO43ZMBzzdVngHaHM?pid=ImgDet&rs=1" alt="settings" width="75" height="75">
</button>
<h1 id="Starcodeselector">Starcodeselector</h1>
<button onclick="generateCode()" id="Generate">Generate</button>
<div id="code"></div>