javascript - 提交和页面更改后，表单值保留为 cookie

Question

我目前正在编写一个 HTML 页面，其中包含一些控制各种事件的 javascript。

当用户单击“提交”时，页面会自动加载来自服务器的响应(这是一个测试页面，用于显示发送到服务器的 XML 以及生成的响应)。我希望用户能够切换回表单并查看他们选择的值(3x 下拉菜单 - 一个由另一个下拉菜单控制，3x 文本框 - 由下拉菜单控制的值，以及从用户使用输入 type="file"选择的文本文件。

仅当用户可以轻松切换回表单然后返回响应时，此页面才有用。我尝试使用 cookie 保存值，然后在用户返回页面时将它们加载到输入中，但我的代码拒绝工作。

我在互联网上尝试了一些不同的示例，以及使用 Garlic.js，但无论我尝试什么，当我在浏览器中单击“后退”并加载表单时，我的所有输入都消失了。我测试了各种脚本，并意识到我的代码中存在某种错误，因为当我将这些函数包含在与我的工作下拉函数相同的脚本区域中时，整个表单会崩溃。

这是包含 cookie 方法的脚本:

JAVASCRIPT

function persist() {
    removeAllCookies();
    var fValues[] = new Array();
    var expiry = new Date(today.getTime() + 3600 * 1000); // 1 hour expiry 
    fValues[0] = document.getElementByName('calcType').value;
    fValues[1] = form.action.value;
    fValues[2] = document.getElementByName('transform').value;
    fValues[3] = document.getElementByName('calcResponse').value;
    fValues[4] = document.getElementByName('source').value;
    fValues[5] = document.getElementById('area').value;
    var i = 0;
    for (i = 0; i <= 6; i++) {
        element = fValues[i];
        writeCookie(i, element, expiry);
    }
}

function fillFromCookies() {
    var a = getCookie("0");
    var b = getCookie("1");
    var c = getCookie("2");
    var d = getCookie("3");
    var e = getCookie("4");
    var f = getCookie("5");
    if (b != null && f != null) {
        document.getElementByName('calcType').value = a;
        form.action.value = b;
        document.getElementByName('transform').value = c;
        document.getElementByName('calcResponse').value = d;
        document.getElementByName('source').value = e;
        document.getElementById('area').value = f;
    }
}

function writeCookie(id, value, expiry) {
    cookievalue = (value + ";");
    document.cookie = id + "=" + cookievalue + "; path=/; expires=" + expiry.toGMTString();
}

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 "";
}

function deleteCookie(name) {
    var expired = new Date(today.getTime() - 24 * 3600 * 1000); 
    document.cookie = name + "=null; path=/; expires=" + expired.toGMTString();
}

function removeAllCookies() {
    deleteCookie("0");
    deleteCookie("1");
    deleteCookie("2");
    deleteCookie("3");
    deleteCookie("4");
    deleteCookie("5");
}

HTML (用于测试目的)

    calcType<br/>
    <textarea name="calcType" cols="150" rows="2">-</textarea><br/><br/>
    transform<br/>
    <input type="text" name="transform" size="50" value="-"/><br/><br/>
    calcResponse<br/>
    <input type="text" name="calcResponse" size="50" value="-"/><br/><br/>
    source<br/>
    <input type="text" name="source" size="50" value="-"/><br/><br/>
    test<br/>
    <input type="text" name="test" size="50" value="test"/><br/><br/>
    environment         
        <select id="Environment">
            <option>Pick one</option>
            <option>TEST</option>
        </select><div>
    product
        <select id="Product">
            <option>Pick one</option>
            <option>TEST</option>
        </select><div>
    brand
        <select id="Brand">
            <option>Choose Product First</option>
            <option>TEST</option>
        </select>
    <textarea id = "area" onload = "fillFromCookies();" name="calcData" cols="150" rows="50">

我将 persist() 函数称为:<form ..onsubmit="persist()"...>

我在文本区域(包含所选文件中的 txt)调用 fillFromCookies() textarea ..onload="fillFromCookies();"属性(property)。 (它是 HTML 代码中的最后一个元素)。

我对 javascript 比较陌生，因此欢迎并赞赏对代码的任何评论。

Answer 1

我不确定您的要求是什么，但我的建议是使用 ajax 将表单发布到服务器，这样您的表单就会被保留，因为没有发布/回调需要处理。你调用另一个页面，然后返回你的 xml，我相信你可以用 JQuery 解析它，尽管如果你仅限于 javascript，你仍然可以这样做，但会涉及更多一点。

$.ajax({url : url, dataType: "xml", success : function(data) { }, 
    error : function(request, status, error) { }
});

如果出于某种原因发布页面确实很重要，那么您可以在将表单发送到客户端之前使用动态 html 填充表单，具体取决于您使用的服务器端技术，执行此操作的方法也会有所不同。不幸的是，在不了解更多信息的情况下，我无法帮助您。

最后这是一个关于在 javascript 中设置 cookie 的教程。希望这可以帮助: http://sicanstudios.com/post/set-cookies-javascript/