表单值在提交后作为cookie保存&页面更改

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

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

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

我对javascript还比较陌生，所以欢迎对代码发表任何评论。