Javascript 使用cookie记住背景颜色并在从表单访问时显示
大家好，我已经创建了我的代码，这样一旦用户填写表单并按下submit，它就会使用cookie记住表单中的首选项 我的第一个问题是，我无法获取我不知道如何使用“init（）”方法向用户打印消息 我的第二个问题是，当用户返回同一页面时，我不知道如何根据用户填写的表单显示页面。（如果有人单击蓝色作为背景，当它返回页面时仍以蓝色显示）。我试着通过记住名字和根据他们的选择改变颜色来做到这一点Javascript 使用cookie记住背景颜色并在从表单访问时显示,javascript,html,css,cookies,Javascript,Html,Css,Cookies,大家好，我已经创建了我的代码，这样一旦用户填写表单并按下submit，它就会使用cookie记住表单中的首选项 我的第一个问题是，我无法获取我不知道如何使用“init（）”方法向用户打印消息 我的第二个问题是，当用户返回同一页面时，我不知道如何根据用户填写的表单显示页面。（如果有人单击蓝色作为背景，当它返回页面时仍以蓝色显示）。我试着通过记住名字和根据他们的选择改变颜色来做到这一点 !DOCTYPE html> <html> <head> &
!DOCTYPE html>
<html>
<head>
<script type="text/JavaScript">
function changeColour(buttonColour){
if (buttonColour =="red"){
document.body.style.backgroundColor = "#FF0000";
document.body.style.color = "#CCFFFF";
}else if(buttonColour == "blue"){
document.body.style.backgroundColor = "#0000FF";
document.body.style.color = "#CCFFFF";
}else if(buttonColour == "green"){
document.body.style.backgroundColor = "#009933";
document.body.style.color = "#CCFFFF";
}
}
expirydate.setDate(exdate.getDate()+numdays);
expirydate.toUTCString();
function setCookie(firstname){
var expirydate = new Date();
document.cookie = "firstname =" + encodeURIComponent(firstname);
expirydate.setDate(expirydate.getDate()+ 7*24*60*60*1000);
expirydate.toUTCString();
var checkedbox;
elementArray = document.getElementsByTagName("input");
console.log(elementArray);
for (var i =0; i<elementArray.length; i++){
if(elementArray[i].type="radio" && elementArray[i].checked){
checkedbox = elementArray[i].value;
alert(checkedbox);
document.cookie = "buttonColour" + "=" + encodeURIComponent(checkedbox);
}
}
}
function readCookie(firstname){
var namevalueArray = document.cookie.split(";");
for(var i =0; i< namevalueArray.length; i++){
var smallvalueArray = namevalueArray[i].trim().split("=");
if(smallvalueArray[0]== firstname){
document.cookie = "firstname" + decodeURIComponent(firstname);
return smallvalueArray[1];
}else{
return null;
}
}
function init(){
print("welcome =", firstname)
}
}
</script>
<script type="text/css">
#formsa{
width:300px;
height:400px;
position: absolute;
font-weight: bolder;
left:200px;
top:70px;
}
</script>
</head>
<body onload=init()>
<div id="formsa">
<form name="test" method="get" id="forms">
First name: <input type="text" name="firstname"><br>
Red colour: <input type="radio" name="buttonColour" value="red" onchange=
"changeColour('red');"><br>
Green colour: <input type="radio" name="buttonColour" value="green" onchange=
"changeColour('green');"><br>
Blue colour: <input type="radio" name="buttonColour" value="blue" onchange=
"changeColour('blue');"><br>
<button type="button" value="Save" id="saveButton" onclick=`enter code here`
"setCookie(firstname.value);">Save</button>
</div>
</form>
</body>
</html>
！DOCTYPE html>
功能更改颜色（按钮颜色）{
如果（按钮颜色=“红色”）{
document.body.style.backgroundColor=“#FF0000”；
document.body.style.color=“#CCFFFF”；
}否则如果（按钮颜色==“蓝色”）{
document.body.style.backgroundColor=“#0000FF”；
document.body.style.color=“#CCFFFF”；
}否则如果（按钮颜色==“绿色”）{
document.body.style.backgroundColor=“#009933”；
document.body.style.color=“#CCFFFF”；
}
}
expirydate.setDate（exdate.getDate（）+numdays）；
expirydate.toutString（）；
函数setCookie（firstname）{
var expirydate=新日期（）；
document.cookie=“firstname=”+encodeURIComponent（firstname）；
expirydate.setDate（expirydate.getDate（）+7*24*60*60*1000）；
expirydate.toutString（）；
var复选框；
elementArray=document.getElementsByTagName（“输入”）；
log（elementArray）；
对于（var i=0；i我不太确定我是否真的遵循了您试图做的事情，但我将尝试给您一些提示
加载页面时，您可以像现在这样使用init
函数
在init
功能中，如果要在用户脸上“打印”消息，则有两个选项
a、 通过设置html元素的innerHTML
属性（例如标题…h1
，h2
，h3
）在页面上呈现“欢迎”消息
b、 通过“提醒”消息是，我个人不喜欢这种方法，但它是另一种选择，使用警报
功能，而不是使用打印
，因为打印
似乎没有在代码中定义，除非您试图打印到打印机上……我怀疑，无论哪种方式，这都不是正确的启动方式h浏览器的打印对话框
在init
函数中，您应该尝试以安全的方式检索cookie
如果cookie存在，则检索其值并相应地设置html元素
如果该页面不存在，请按正常方式呈现该页面
您已经编写了读/写cookie和读/写html元素的大部分逻辑。这只是在init
函数中实现它们的问题。非常感谢您的建议。我不想使用警报，因此innerHTML适合我。我的另一个问题是，我不知道如何检索cookie和html然后允许按照用户的要求呈现页面。再次感谢您的帮助。但是，您已经在代码中这样做了…只需确保您设置了cookie名称、值和过期时间，就可以继续了