Javascript 设置 Cookie 以记住表单提交答案

【问题标题】：Javascript Setting Cookie to Remember form SubmissionJavascript 设置 Cookie 以记住表单提交
【发布时间】：2020-05-07 15:18:15
【问题描述】：

我已经设法创建了一个表单并设置了一个 cookie 来记住用户已经提交了表单，但是代码看起来非常复杂。没有更简单的方法可以做到这一点吗？我可以删除什么？我没有保存任何输入数据。我只需要确保用户填写表单然后被重定向到索引页面。然后，当他们再次尝试打开该页面时，就不必填写表单了。

<html>
<head>
    <title>Document Title</title>
    <script type="text/javascript">
        cookie_name="landasp"
        expdays=365

        function set_cookie(name, value, expires, path, domain, secure){
            if (!expires){expires = new Date()}
                document.cookie = name + "=" + escape(value) +
            ((expires == null) ? "" : "; expires=" + expires.toGMTString()) +
            ((path == null) ? "" : "; path=" + path) +
            ((domain == null) ? "" : "; domain=" + domain) +
            ((secure == null) ? "" : "; secure");
        }

        function get_cookie(name) {
            var arg = name + "=";
            var alen = arg.length;  
            var clen = document.cookie.length;
            var i = 0;
            while (i < clen) {
                var j = i + alen;
                if (document.cookie.substring(i, j) == arg){
                    return get_cookie_val(j);
                }
                i = document.cookie.indexOf(" ", i) + 1;
                if (i == 0) break;
            }
            return null;
        }

        function get_cookie_val(offset){
            var endstr = document.cookie.indexOf (";", offset);
            if (endstr == -1)
                endstr = document.cookie.length;
            return unescape(document.cookie.substring(offset, endstr));
        }

        function saving_cookie(){
            var expdate = new Date ();
            expdate.setTime (expdate.getTime() + (expdays*24*60*60*1000));

            Data="cooked"

            set_cookie(cookie_name,Data,expdate)
        }

        function get_cookie_data(){
            inf=get_cookie(cookie_name)
            if(!inf){
                document.getElementById("display1").style.display="block"
            }
            else{
                document.getElementById("display2").style.display="block"
            }
        }
    </script>
</head>

<body onload="get_cookie_data()">
    <div id="display1" style="display:none">
        <div class="register">
            <form action="index.html" onsubmit="saving_cookie()">
                <div>Name<br>
                    <input name="name" type="text" id="name" class="inputf">
                    <br>Tel<br>
                    <input name="tel" type="text" id="tel" class="inputf">
                    <br><br>
                    <input type="submit" name="Submit" value="Submit" class="button1">
                </div>
            </form>
        </div>

        <div id="display2" style="display:none">
            <div class="register">
                <p><strong>REGISTERED</strong></p>
            </div>
        </div>
    </body>
    </html>

【问题讨论】：

标签： javascript html cookies

【解决方案1】：

是的，cookie 脚本通常那么大。您可以将它们外部化到 jsfile 中

但是，如果您不需要服务器上的 cookie，我们现在使用 sessionStorage 或 localStorage

还逆向测试

注意这个脚本完全取代了你的

const cookie_name = "landasp";
window.addEventListener("load", function() {
  const inf = localStorage.getItem(cookie_name);
  if (inf) {
    document.getElementById("display2").style.display = "block"
    setTimeout(function() {location.replace("index.html"},2000)
  } else {
    document.getElementById("display1").style.display = "block"
  }
  document.getElementById("regForm").addEventListener("submit", function() {
    localStorage.setItem(cookie_name, "done");
  })
})

向表单添加 ID 并删除内联事件处理程序

<div id="display1" style="display:none">
  <div class="register">
    <form action="index.html" id="regForm">
      <div>Name<br>
        <input name="name" type="text" id="name" class="inputf">
        <br>Tel<br>
        <input name="tel" type="text" id="tel" class="inputf">
        <br><br>
        <input type="submit" name="Submit" value="Submit" class="button1">
      </div>
    </form>
  </div>

  <div id="display2" style="display:none">
    <div class="register">
      <p><strong>REGISTERED</strong></p>
    </div>
  </div>
</div>

【讨论】：

这应该取代我拥有的一切？如果我这样做并提交表单，当我返回 1 页时，它仍会显示表单
我的坏document.getElementById("regForm").addEventListener("submit", function() { - .on 是 jQuery
感谢您的帮助，当用户登陆该页面时，如果表单提交，有没有办法自动重定向到索引页面？如果他们已经填写了，我基本上不希望他们看到这个页面。
当然。改成if (inf) { location.replace("index.html") } else {document.getElementById("display1").style.display = "block"}
查看更新 - 我提供了一个超时选项，因此他们会在重定向之前看到“已注册”