如何爲後退按鈕保留網頁表單內容

當提交網頁表單並將用戶轉到其他頁面時，用戶通常會點擊後退按鈕以便再次提交表單（在我的情況下，該表單是高級搜索。）如何爲後退按鈕保留網頁表單內容

如何可靠地保存用戶選擇的表單選項時，他們單擊後退（因此，他們不必從頭開始，再次填寫表單）只是改變了許多表單元素之一嗎？）

我是否必須在會話數據（cookie或服務器端）中存儲表單選項的路徑，還是有辦法讓瀏覽器處理這個我？

（環境是PHP/JavaScript的 - 而網站必須在IE6 +和Firefox2 +工作）

來源

2008-10-29 Peter Howe

我把它放在了會議。
這將是最可靠的，即使他們不直接「返回」，它仍然有他們的搜索選項。把它放入cookie也可以，但是除非是非常小的形式，否則不會被推薦。

來源

2008-10-29 17:00:20 Greg

我相信你是在瀏覽器的擺佈。當你回擊時，瀏覽器不會向服務器提出新的內容請求，它會使用緩存（幾乎在任何我見過的瀏覽器中）。所以任何服務器端都不可用。

我想知道你是否可以做一些非常複雜的事情，比如在結果頁面的onunload事件中將搜索結果存儲在cookie中，然後在搜索頁面上讀取JavaScript中的cookie並填寫表單 - 但這只是猜測，我不知道它是否會起作用。

來源

2008-10-29 17:00:51

服務器端不一定不是一個選項 - 再次爲頁面執行JavaScript - 所以我們可以發出Ajax請求。 – 2008-10-29 17:03:40

這是真的。我忘了那個。 – 2008-10-29 17:05:15

您遇到的問題是瀏覽器將返回緩存版本的頁面，並且可能不再向服務器請求它，這意味着使用會話將是無關緊要的。

然而，您可以使用AJAX在頁面的加載事件中加載先前提交的表單的詳細信息。

來源

2008-10-29 17:04:27 Ady

您基本上必須以某種方式將它存儲在您的服務器上（可能在會話變量中，如建議）後。您還必須在表單頁面上設置Javascript才能執行加載以發出AJAX調用以從您的服務器獲取數據（例如JSON格式）並預先填寫表單字段和數據。

示例jQuery代碼：

$(document).ready(function() { 
    $.getJSON(
    "/getformdata.php", 
    function(data) { 
     $.each(data.items, function(i,item) { 
     $('#' + item.eid).val(item.val); 
     }); 
    }); 
});

你/getformdata.php可能返回數據，如：

{ 
    'items': [ 
    { 
     'eid': 'formfield1', 
     'val': 'John', 
    }, 
    { 
     'eid': 'formfield2', 
     'val': 'Doe', 
    } 
    ] 
}

，如果沒有什麼了會議尚未保存爲這顯然返回一個空數組。上面的代碼很粗糙，沒有經過測試，但是應該給你基本的想法。

附註：當前版本的Opera和Firefox將在返回時保留表單字段內容。你的JS代碼會覆蓋這個，但這應該是安全的。

來源

2008-10-29 17:13:57 Pistos

另一個ajaxy選項（對沒有javascript的用戶不適用）是通過javascript提交表單，然後進入確認頁面（或通過用消息替換按鈕來顯示錶單上的消息）。這樣就沒有「回」的可能。

來源

2008-10-29 17:14:21 afroginthevalley

爲什麼不在提交之前將值存儲到cookie中？您還可以包含一個時間戳或標記來指示它何時填寫。然後，當頁面加載時，您可以確定是否應該使用cookie中的數據填寫字段，或者將它們留爲空白，因爲這是新的搜索。

來源

2008-10-29 17:18:36

這取決於瀏覽器，但在大多數情況下，您無需執行任何操作。

IE，Firefox等會高興地記住上一頁中表單的內容，並在點擊返回時再次顯示它......只要您不做任何事情來阻止該工作，如使頁面無緩存或完全由腳本構建表單。

（會話把東西可能與兩個標籤相同的形式開放混淆的瀏覽器。在做這樣的事情時要非常小心。）

來源

2008-10-29 17:35:29 bobince

你也可以做的一切由JavaScript地方。因此，您存儲一個包含搜索值的cookie，並在頁面加載中檢查cookie是否存在。這樣的事情：

$('#formSubmitButton').click(function() { 
    var value = $('#searchbox').val(); 
    var days = 1; 
    var date = new Date(); 
    date.setTime(date.getTime()+(days*24*60*60*1000)); 
    var expires = "; expires="+date.toGMTString(); 
    document.cookie = "searchbox="+value+expires+"; path=/"; 
}); 

$(document).ready(function() { 
    var nameEQ = "searchbox="; 
    var ca = document.cookie.split(';'); 
    for(var i=0;i < ca.length;i++) { 
     var c = ca[i]; 
     while (c.charAt(0)==' ') c = c.substring(1,c.length); 
     if (c.indexOf(nameEQ) == 0) var valueC = c.substring(nameEQ.length,c.length); 
    } 
    $('#searchbox').val(valueC); 
});

沒有測試過，但是應該工作。你將需要jQuery。

Cookie的功能來自：http://www.quirksmode.org/js/cookies.html

我應該說是順便說一句Firefox和IE都具有默認這種行爲。

來源

2008-11-08 22:57:55

如何爲後退按鈕保留網頁表單內容

回答

相關問題