Question

我正在开发javascript Cookie。提供给我的材料很短，没有例子。我正在尝试创建一个html表单，允许用户在页面刷新时输入名称和喜爱的宠物，它将在html页面中显示用户名和喜爱的宠物以及允许用户更改宠物。我不明白如何将用户输入分配给cookie然后在html上显示它。这就是我到目前为止所拥有的

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

Answer 1

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

来自用户输入的JavaScript Cookie

1 个答案: