时间戳

首页 > 解决方案 > Javascript 设置 Cookie 以记住表单提交

javascript - Javascript 设置 Cookie 以记住表单提交

问题描述

我设法创建了一个表单并设置了一个 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>

标签： javascripthtmlcookies

解决方案

是的，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>

推荐阅读