个人中心
gpt4 book ai didi

javascript - 该代码未在浏览器中为 cookie 生成文件

转载 作者：行者123 更新时间：2023-11-27 23:56:46 25 4
gpt4 key购买 nike

我有一个 html 和 Javascript 代码，用于设置 cookie 并从 cookie 中获取。我复制了 JS 的代码并编写了 HTML 的代码，但我无法获取 cookie。这是我的代码

<!DOCTYPE html>
<html>
<head>
<script>
function setCookie(cname,cvalue,exdays) { // sets the cookie
  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>
<style>  // CSS details for login page creation .

html, body {
    width: 100%;
    height: 100%;
    font-family: "Helvetica Neue", Helvetica, sans-serif;
    color: #444;
    -webkit-font-smoothing: antialiased;

    background-image: url("bg.jpg");
}
#container {
    position: fixed;
    width: 500px;
    height: 395px;
    top: 25%;
    left: 30%;
    margin-top: -5px;
    margin-left: -200x;
    background: #fff;
    border-radius: 30px;
    border: 1px solid #ccc;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .1);

}
form {
    margin: 0 auto;
    margin-top: 20px;
}
label {
    color: #555;
    display: inline-block;
    margin-left: 18px;
    padding-top: 10px;
    font-size: 14px;
}
p a {
    font-size: 11px;
    color: #aaa;
    float: right;
    margin-top: -13px;
    margin-right: 20px;
 -webkit-transition: all .4s ease;
    -moz-transition: all .4s ease;
    transition: all .4s ease;
}
p a:hover {
    color: #555;
}
input {
    font-family: "Helvetica Neue", Helvetica, sans-serif;
    font-size: 12px;
    outline: none;
}
input[type=text],
input[type=password] {
    color: #777;
    padding-left: 10px;
    margin: 10px;
    margin-top: 12px;
    margin-left: 18px;
    width: 290px;
    height: 35px;
    border: 1px solid #c7d0d2;
    border-radius: 2px;
    box-shadow: inset 0 1.5px 3px rgba(190, 190, 190, .4), 0 0 0 5px #f5f7f8;
-webkit-transition: all .4s ease;
    -moz-transition: all .4s ease;
    transition: all .4s ease;
    }
input[type=text]:hover,
input[type=password]:hover {
    border: 1px solid #b6bfc0;
    box-shadow: inset 0 1.5px 3px rgba(190, 190, 190, .7), 0 0 0 5px #f5f7f8;
}
input[type=text]:focus,
input[type=password]:focus {
    border: 1px solid #a8c9e4;
    box-shadow: inset 0 1.5px 3px rgba(190, 190, 190, .4), 0 0 0 5px #e6f2f9;
}
#lower {
    background: #ecf2f5;
    width: 100%;
    height: 69px;
    margin-top: 20px;
      box-shadow: inset 0 1px 1px #fff;
    border-top: 1px solid #ccc;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
}
input[type=checkbox] {
    margin-left: 20px;
    margin-top: 30px;
}
.check {
    margin-left: 3px;
    font-size: 11px;
    color: #444;
    text-shadow: 0 1px 0 #fff;
}

input[type=submit] {
    float: right;
    margin-right: 20px;
    margin-top: 20px;
    width: 80px;
    height: 30px;
font-size: 14px;
    font-weight: bold;
    color: #fff;
    background-color: #acd6ef; /*IE fallback*/
    background-image: -webkit-gradient(linear, left top, left bottom, from(#acd6ef), to(#6ec2e8));
    background-image: -moz-linear-gradient(top left 90deg, #acd6ef 0%, #6ec2e8 100%);
    background-image: linear-gradient(top left 90deg, #acd6ef 0%, #6ec2e8 100%);
    border-radius: 30px;
    border: 1px solid #66add6;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .5);
    cursor: pointer;
}

input[type=submit]:hover {
    background-image: -webkit-gradient(linear, left top, left bottom, from(#b6e2ff), to(#6ec2e8));
    background-image: -moz-linear-gradient(top left 90deg, #b6e2ff 0%, #6ec2e8 100%);
    background-image: linear-gradient(top left 90deg, #b6e2ff 0%, #6ec2e8 100%);
}

#imgcontainer {
  text-align: center;
  margin: 24px 0 12px 0;
}

img.infosys {
  width: 50%;

}



</style>

</head>


<body>


    <form method = "post">
    <div id="container"> 
        <div id="imgcontainer">
            <img src="pic.png" alt="pic Logo" class="pic"  >
        </div>

        <br/>

            <label for="username">Username:</label>
            <input type="text" id="username" name="username" >
            <label for="password">Password:</label>
            <input type="password" id="password" name="password">
            <div id="lower">
                <input type="checkbox"><label class="check" for="checkbox">Keep me logged in</label>
                <input type="submit" value="Login" onClick="checkCookie()">
            </div>
        </form>
    </div>
</body>
</html>

如何知道用户名是否存储成功？请务必让我知道，我犯了什么错误以及哪里出了问题。

最佳答案

您的代码中有 2 个问题。 @camen6ert 提到了其中一个问题，第二个问题是您正在将 user 变量传递给空的 setCookie() 函数，但是，cookie 名称不应该是空。

您需要替换这部分代码:

if (user != "" && user != null) {
    setCookie("username", user, 30);
}

用这个:

if (user != "" || user != null) {
    setCookie("username", document.getElementById("username").value, 30);
}

希望，它对你有用。

关于javascript - 该代码未在浏览器中为 cookie 生成文件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56215082/

25 4 0
文章推荐： c++ - 即使在空字符之后也会打印垃圾值
文章推荐： php - WordPress图片上传错误
文章推荐： c++ - Fork 程序在一段时间后给出 进程
文章推荐： javascript - 仅保存 Javascript 对象的原始属性的最优雅的方法
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com