2017-05-08 17 views
0

私はjavascriptのクッキーに取り組んでいます。私に提供された資料は非常に短く、例はありませんでした。私は、ユーザーがペットを変更することができるように、HTMLページにユーザー名とお気に入りのペットを表示するように、ページが更新されたときに名前とお気に入りのペットを入力できるHTMLフォームを作成しようとしています。私はどのようにユーザーの入力をクッキーに割り当て、それをhtmlに表示するのか分かりません。これは私が、特定の値にHTMLを設定innerHTMLを使用するためには、これまでユーザー入力からのjavascriptのクッキー

<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> 

<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> 
関連する問題