输入 js 验证 & 将输入的用户数据存储在 cookie 中答案

【问题标题】：Input js validation & storing inputed user data in cookies输入 js 验证 & 将输入的用户数据存储在 cookie 中
【发布时间】：2017-04-19 08:23:17
【问题描述】：

如果输入名称，newsletter 类将消失，newsletter1 类将出现并显示Thankyou for joining, [Nameofuser]

我有一个表格可以输入姓名和电子邮件。当电子邮件以正确的格式输入时，弹出窗口会出现Successful，我正在尝试将该名称保存在 cookie 中。所以当我刷新页面时，会显示Thankyou for joining, [Nameofuser]

这是我到目前为止所取得的成就：我无法将输入名称保存在 cookie 中

http://www.w3schools.com/code/tryit.asp?filename=FAEWXAJJ7VKX

https://jsfiddle.net/sachitmaskey/kav5y1ba/

CSS

<head>
    <style>
        .newsletter {
            margin - bottom: 33 px;
        }

        .newsletter1 {
            z - index: 99999;
            margin - top: -250 px;
            color: red;
        }
    </style>
</head>

HTML

<body onload = "checkCookie()">
    <div class="newsletter" style="float: left;">
        <h3>NEWSLETTER</h3>

        Name :<input type="text" name="name"><br>

        <form name="myForm" onsubmit="return validateForm();" method="post">
            Email: <input type="text" name="email">
            <br><br><input type="submit" value="Submit">
            <p id="demo"></p>
        </form>
    </div>


    <div class="newsletter1" style="float: left;">
        <p id="thankyou">  
        </p><br>
    </div>
</body>

</html>



**JAVASCRIPT**
<script>
    function validateForm() {
        var x = document.forms["myForm"]["email"].value;
        var name = document.forms["myForm"]["name"].value;
        var atpos = x.indexOf("@");
        var dotpos = x.lastIndexOf(".");
        if (atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= x.length) {
            alert("Not a valid e-mail address");
            return false;
        } else {

            alert("Successful");
            // If name is entered,newsletter class will disapper and newsletter1 class will appear displaying "Thankyou"


            if (y > 0) {

                $('.newsletter1').css('display', 'block');
                $('.newsletter').css('display', 'none');


                // setting cookie, getting cookie and checking cookie if it exist or not
                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 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("name");
                    if (user != "") {
                        setCookie("name", user, 30);
                        document.getElementById("thankyou").innerHTML = "Thankyou for joining...."
                    }
                }
            }
        }
    }
</script>

【问题讨论】：

标签： javascript html cookies

【解决方案1】：

您最好使用缓存而不是 cookie，因为您的服务器可能会导致会话过期，这意味着每次用户访问页面时都会由新会话处理，而旧会话会被销毁。我建议您改用浏览器缓存。

【讨论】：

【解决方案2】：

使用 cookie 有点过时，我会改用 window.localStorage。

更简单：

localStorage.setItem('name', "John Smith");
console.log(localStorage.getItem('name')); // "John Smith"

localStorage.removeItem('name');
console.log(localStorage.getItem('name')); // null

【讨论】：