2017-05-08 101 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> 
相關問題