2017-05-08 37 views
0

我正在致力于使用JavaScript cookies。提供给我的材料非常短,没有例子。我正在尝试创建一个html表单,该表单允许用户在页面刷新时输入名称和最喜欢的宠物,它将在html页面中显示用户名和最喜欢的宠物以及允许用户更换宠物。我不明白如何将用户输入分配给cookie,然后将其显示在html上。这是我到目前为止的内容来自用户输入的javascript cookie

<html> 

<head> 

<script> 

var x = document.getElementById("nm").value; 
var y = document.getElementById("fp").value; 
document.cookie = x; 


function setCookie(cname,cvalue,exdays) { 
var d = new Date(); 
d.setTime(d.getTime() + (exdays*24*60*60*1000)); 
var expires = "expires=" + d.toGMTString(); 
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/"; 
} 

function getCookie(cname) { 
var name = cname + "="; 
var decodedCookie = decodeURIComponent(document.cookie); 
var ca = decodedCookie.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 checkCookie() { 
var user=getCookie("username"); 
if (user != "") { 
    alert("Welcome again " + user); 
} else { 
    user = prompt("Please enter your name:",""); 
    if (user != "" && user != null) { 
     setCookie("username", user, 30); 
    } 
    } 
} 

</script> 

</head> 

<body onload="checkCookie()"> 

    <header> 
     Cookies 
    </header> 
    <br> 

<form name="myForm" 
onsubmit="return validateForm()" method="post"> 

Name: <input type="text" name="fname" id="nm"><br> 
<br> 
Favorite Pet: <input type="text" name="fpet" id=""fp"><br> 
<br> 
<button onclick="">Show cookies</button> 

</form> 

</body> 

</html> 

回答

0

为了将html设置为特定值,请使用innerHTML

关于你的代码还有其他几件事情可以改进,但我希望在这里给你一个快速的帮助。

<html> 

<head> 

<script> 




function setCookie(cname,cvalue,exdays) { 
    var d = new Date(); 
    d.setTime(d.getTime() + (exdays*24*60*60*1000)); 
    var expires = "expires=" + d.toGMTString(); 
    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/"; 
} 

function getCookie(cname) { 
var name = cname + "="; 
var decodedCookie = decodeURIComponent(document.cookie); 
var ca = decodedCookie.split(';'); 
console.log(ca) 
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 checkCookie() { 
var user=getCookie("username"); 
if (user != "") { 
    alert("Welcome again " + user); 
    document.getElementById("name").innerHTML = user; 
} else { 
    user = prompt("Please enter your name:",""); 
    if (user != "" && user != null) { 
     setCookie("username", user, 30); 
    } 
    } 
} 

</script> 

</head> 

<body onload="checkCookie()"> 

    <header> 
     Cookies 
    </header> 
    <br> 

<form name="myForm" 
onsubmit="return validateForm()" method="post"> 

<hr> 

<p>Previously entered name:</p> 
<b><p id="name"></p></b> 

<hr> 

Name: <input type="text" name="fname" id="nm"><br> 
<br> 
Favorite Pet: <input type="text" name="fpet" id="fp"><br> 
<br> 
<button onclick="">Show cookies</button> 

</form> 

<script type="text/javascript"> 
    var x = document.getElementById("nm").value; 
    var y = document.getElementById("fp").value; 
    document.cookie = x; 
</script> 
</body> 

</html>