2017-05-17 2 views
1

私は、私の例ではペットを使用しているユーザー名とお気に入りのアイテムを保存するためにクッキーを使用するjavascript progrmaを持っています。 Htmlページでは、ユーザーが好みのペットをフォームテキスト入力で更新し、ボタンをクリックすると入力でCookieを更新することができます。どのようにしたらいいですか...どんな提案や助けも大歓迎です。javascriptフォームテキスト入力でクッキーを更新する方法

<html> 

<body onload="checkCookie()"> 
     <header> 
      Cookies 
     </header> 
     <br> 

    <form> 
    <br> 
    Update favorite Pet:<br><br> <input type="text" name="fpet" id="fp"><br> 
    <br> 
    <button onclick="myUpdate()">Update</button> 

    </form> 
    <p>Favorite Pet:</p> 
    <p id="uip"></p> 
    <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(';'); 
    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"); 
var pet=getCookie("fpet"); 
if (user != "") { 
    alert("Welcome again " + user); 
} else { 
    user = prompt("Please enter your name:",""); 
    if (user != "" && user != null) { 
     setCookie("username", user, 30); 
    } 
} 
if (pet != "") { 
    alert("Your favorite pet is " + pet); 
} else { 
    pet = prompt("Please enter your favorite pet:",""); 
    if (pet != "" && pet != null) { 
     setCookie("fpet", pet, 30); 
    } 
} 
document.getElementById("uip").innerHTML = pet; 
} 

</script> 

</body> 

</html> 

答えて

0

これを試すことができます。ローカルのPCから実行すると、時にはうまく動作しません。任意のサーバーまたはローカルサーバーをホストしようとします。

<html> 

<body onload="checkCookie()"> 

    <header>Cookies</header> 

    <br><br> 
    Update favorite Pet:<br><br> <input type="text" name="fpet" id="fp"><br> 
    <br> 
    <button onclick="myUpdate()">Update</button> 
    <p>Favorite Pet:</p> 
    <p id="uip"></p> 

    <script type="text/javascript"> 

     function myUpdate(){ 
      var updateFp = document.getElementById("fp").value; 
      setCookie('fpet',updateFp,1); 
      document.getElementById("uip").innerHTML = getCookie('fpet'); 
     } 

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

     function getCookie(cname) { 
      var name = cname + "="; 
      var ca = document.cookie.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"); 
      var pet = getCookie("fpet"); 

      if (user != "") { 
       alert("Welcome again " + user); 
      } else { 
      user = prompt("Please enter your name:",""); 
      if (user != "" && user != null) { 
       setCookie("username", user, 30); 
      } 
      } 
      if (pet != "") { 
       alert("Your favorite pet is " + pet); 
      } else { 
      pet = prompt("Please enter your favorite pet:",""); 
      if (pet != "" && pet != null) { 
       setCookie("fpet", pet, 30); 
      } 
      } 
      document.getElementById("uip").innerHTML = pet; 
     } 

    </script> 

</body> 

関連する問題