提交＆頁面更改後，表單值保存爲Cookie

Question

我目前正在編寫一個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"> 

我所說的堅持（）之類的函數：<form ..onsubmit="persist()"...>

我請fillFromCookies（）上的文本區域（從所選的文件包含TXT） textarea ..onload="fillFromCookies();"屬性。 （這是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/

Answer 2

我一直在使用cookie整天，甚至使用AJAX查看回應到一個單獨的文本框。經過大量研究後，我發現了一個非常方便的方法來保持表格完整，以便比較響應和輸入：在單獨的選項卡中打開響應。

通過將target="_blank"添加到表單標記中，服務器返回的XML現在顯示在新選項卡中。 Cookie可能是一種方式，但是我用純Javascript和不同的JQuery插件存在很多問題（由於初學者的理解）。