【问题标题】：After submit is clicked, I would like jQuery to act slightly different. Cache?单击提交后，我希望 jQuery 的行为略有不同。缓存？
【发布时间】：2014-01-08 06:52:16
【问题描述】：

我有一个 jQuery 联系表单，在进入我的网站时第一页可见（使用 css）。用户完成表单后，我希望他们能够访问网站的其他页面，而无需在页面加载时重新打开表单。有没有人有这样做的好方法？如果在他们实际关闭/离开网站后再次可见，那就太好了。谢谢！

HTML

<!DOCTYPE html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/isleymultiform.js"></script>
<link rel="stylesheet" href="css/isleymultiform.css" type="text/css" />
</head>
<body>
<div id="request"><p class="button">REQUEST INFO</p></div>
    <div id="form_container">
        <div id="page_1">
        <p class="form">
            <label>Email Address: </label><br /><input value="Email Address"></input>
            <br /><br />
            <label>Your Desired Degree: </label><br /><select id="select_length"><option>Science</option><option>Math</option><option>Yoga</option></select>
            <br /><br />
            <input type="button" id="to_page_2" value="Next"/>
        </p>
        </div>
        <div id="page_2">
                <p class="form">
            <label>First Name: </label><br /><input value="First Name"></input>
            <br /><br />
            <label>Last Name: </label><br /><input value="Last Name"></input>
            <br /><br />
            <label>Phone Number: </label><br /><input value="Phone Number"></input>
            <br /><br />
            <label>Preferred Location: </label><br /><select id="select_length"><option>Minneapolis, MN</option></select>
            <br /><br />                                    
            <label>High School Graduation: </label><br /><select><option>2001</option><option>2002</option><option>2003</option></select>
            <br /><br />  
            <br /><br />
            <input type="button" id="to_prev" value="Previous"></input>
            <button id="to_close">Submit</button>
        </p>
        </div>
       </div>
    </div>
</body>
</html>

JAVASCRIPT

$(document).ready(function(){
    $("#request").click(function(){
        $("#page_1").animate({"height": "220px"},
        "slow");
        $("#page_1").show("slow");
        $("#form_container").toggle("6000");
    });

    $("#to_page_2").click(function(){
        $("#page_2").show();
        $("#page_2").animate({"height": "400px"},
        "slow");
    });
    $("#to_close").click(function(){

        $("#page_2").hide("fast");
        $("#page_1").animate({"height": "0px"},
        "fast");
        $("#page_2").animate({"height": "0px"},
        "fast");
        $("#form_container").hide("fast");
    });

    $("#to_prev").click(function(){

        $("#page_2").hide("slow");
        $("#page_2").animate({"height": "0px"},
        "slow");
    });
});

CSS

#isley_globeform {
    display: block;
    position: absolute;
    right: 0;
    top:40px;
    z-index: 9990;
}

#form_container {
    display: block;
}

#page_1 {
    position: absolute;
    background-color: #7cac24;
    width: 180px;
    height: 220px;
    display: block;
    border-bottom-left-radius: 10px 10px;
    border-bottom-right-radius: 10px 10px;
    border-top-right-radius: 10px 10px;
}

#page_2 {
    position: absolute;
    background-color: #7cac24;
    width: 200px;
    height: 0px;
    display: none;
    border-bottom-left-radius: 10px 10px;
    border-bottom-right-radius: 10px 10px;
    border-top-right-radius: 10px 10px;
}

#request {
    display: block;
    position: relative;
    font-size: 16px;
    font-weight: bolder;
    background-color: #7cac24;
    width: 145px;
    height: 40px;
    z-index: 9998;
}

p.form {
    font-size: .9em;
    font-weight: bold;
    color: #FFF;
    margin-left: 10px;
}

p.button {
    padding: 8px 13px;
    font-size: 1em;
    font-weight: bold;
    color: #FFF;
    cursor: pointer;
}

#to_page_2 {
    position: relative;
    ;
    background-color: #FFF;
    right: -58px;
}

#to_close {
    position: relative;
    ;
    background-color: #FFF;
    right: -26px;
}

#to_prev {
    position: relative;
    ;
    background-color: #FFF;
    right: -10px;
}

.select_length {
    width: 155px;
}

谢谢！！！

【问题讨论】：

标签： javascript jquery html css caching

【解决方案1】：

旁注：您知道您的公式永远不会以这种方式发送到服务器吗？无表单标签，无操作，无 JS 提交。

无论如何，正如评论中所说，您需要一个会话 cookie（或 sessionStorage）。

您可以在此处找到有关如何使用 Javascript 设置和获取 cookie 的更多信息： How do I create and read a value from cookie?

关于 W3Schools 的信息在该主题上也很糟糕：http://www.w3schools.com/js/js_cookies.asp（w3schools 在其他技巧上有一些错误！）

【讨论】：

嘿伙计。感谢您的关注。实际上，是的，我知道。我正在使用带有 C# 的 ASP 来提交我的表单，为了简单起见，我只是这样发布。谢谢，我会检查一下！

【解决方案2】：

您需要根据您的目的对其进行调整，但基本概念是您希望保存对表单所做的任何更改，因为它们发生在 cookie 上。保存到 cookie 可确保当用户离开站点并返回时它们将可用（与会话不同）。然后在加载页面时检查此 cookie 并将其读入表单。

Demo Fiddle

注意。由于 jsfiddle.net 的限制，Fiddle 的行为可能与预期不同

jQuery/Javascript

// Basic function for creating/setting cookies
function createCookie(name, value, days) {
    if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        var expires = "; expires=" + date.toGMTString();
    } else var expires = "";
    document.cookie = name + "=" + value + expires + "; path=/";
}

// Basic function for getting/reading cookies
function getCookie(c_name) {
    if (document.cookie.length > 0) {
        c_start = document.cookie.indexOf(c_name + "=");
        if (c_start != -1) {
            c_start = c_start + c_name.length + 1;
            c_end = document.cookie.indexOf(";", c_start);
            if (c_end == -1) {
                c_end = document.cookie.length;
            }
            return unescape(document.cookie.substring(c_start, c_end));
        }
    }
    return "";
}

// Basic function to convert form fields and values into a string
function form2string($form) {
    return JSON.stringify($form.serializeArray());
}

// Basic function for getting form fields/values converted into a string and inputting into form elements
function string2form($form, serializedStr) {
    var fields = JSON.parse(serializedStr);
    for (var i = 0; i < fields.length; i++) {
        var controlName = fields[i].name;
        var controlValue = fields[i].value;
        $form.find("[name='+ controlName +']").val(controlValue);
    }
}

// Check if a cookie exists with the form data and if so populate the form on page load
prevData = getCookie('myFormData');
prevData && string2form($('form'), prevData);

// Set the cookie each time a form input is changed
$("form :input").change(function () {
    createCookie('myFormData', form2string($(this).closest('form')), 30);
});

参考： 1.https://stackoverflow.com/a/6567102/404335 2.https://stackoverflow.com/a/4825695/404335

【讨论】：