javascript如何使用表单文本输入更新cookie答案

【问题标题】：javascript how to update cookie with form text inputjavascript如何使用表单文本输入更新cookie
【发布时间】：2017-05-17 04:46:00
【问题描述】：

我有一个 javascript 程序，它使用 cookie 来保存用户名和最喜欢的项目，在我的示例中，我使用的是宠物。 Html 页面将允许用户通过表单文本输入更新他们最喜欢的宠物，并在单击按钮时使用输入更新 cookie。坚持如何这样做...任何建议或帮助将不胜感激。

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

【问题讨论】：

标签： javascript forms cookies

【解决方案1】：

你可以试试这个。当你从本地电脑运行它时，有时它不会工作。尝试将其托管在任何服务器或本地服务器上。

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

【讨论】：