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

【问题标题】：Form values kept as cookies after submit & page change提交和页面更改后，表单值保留为 cookie
【发布时间】：2013-08-04 08:07:52
【问题描述】：

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

当用户点击提交时，页面会自动从服务器加载响应（这是一个测试页面，用于显示发送到服务器的 XML 和生成的响应）。我希望用户能够切换回表单并查看他们选择的值（3x 下拉列表 - 一个由另一个选择控制，3x 文本框 - 由下拉列表控制的值，以及从加载的文本区域用户使用 input 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();" 财产。（它是 HTML 代码中的最后一个元素）。

我对 javascript 比较陌生，因此欢迎和赞赏任何关于代码的 cmets。

【问题讨论】：

标签： javascript html forms cookies

【解决方案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/

【讨论】：

好的，谢谢您的评论。我以前没有使用过 ajax，也无法获得将页面保存到 Web 服务器的权限。此网页将作为 HTML 页面加载到本地计算机上，而不是网站的一部分。这就是为什么我在用户测试各种 xml 请求和响应时将 cookie 用作一种本地存储。
对那个 a.hrdie 感到抱歉。我已经编辑了我的答案，以包含有关使用 cookie 的教程的链接，但它使用的是 Jquery。我发现这很有帮助，但恐怕我从来没有在纯 javascript 中做过这种事情，因为 Jquery 让它变得更容易。如果您对 Jquery 感到满意，那将是一个不错的起点。
谢谢，Jquery 让这看起来更容易！将很快发布完成的代码。
没问题，期待看到。

【解决方案2】：

我整天都在研究使用 cookie，甚至研究过使用 AJAX 将响应返回到单独的文本框。经过大量研究，我找到了一种非常方便的方法来保持表单完整，以便比较响应和输入：在单独的选项卡中打开响应。

通过将target="_blank" 添加到表单标签中，服务器返回的 XML 现在显示在新选项卡中。 Cookie 本来是一种方式，但我在使用纯 Javascript 和不同的 JQuery 插件时遇到了很多问题（由于初学者的理解）。

【讨论】：