保留頁面刷新時的表單數據

我有一種情況，出於某種原因網頁可能在用戶填寫表單時刷新。不希望的效果是消除用戶已輸入的數據。保留頁面刷新時的表單數據

有沒有一種解決方案可以讓頁面刷新時保持表單數據？

表單包含文本輸入和選擇。

2012-02-23 Christophe

你說"I have a situation where for some reason a Web page might refresh"，你的意思是說用戶可能刷新頁面，或者它是否刷新頁面的其他腳本？如果是後者，您應該嘗試修復導致刷新的問題，而不是嘗試保留表單數據。如果是前者，JavaScript可能會成爲您的解決方案。

您可以偵聽任何表單元素上的每個關鍵事件。當一個keyup事件被觸發時，您將表單數據序列化並將其寫入cookie（或webstorage，取決於您需要支持的瀏覽器），以保留最新的數據。如果頁面重新加載，或者用戶離開頁面並返回，則cookie可以在文檔就緒的情況下反序列化，並且可以使用cookie中的數據重新填充表單。發佈表單時，請確保也清除Cookie，以確保下次用戶加載頁面時表單未填滿。

更新

下面是有關如何使用GSerializer序列化的反序列化的JavaScript良好的blog post。

來源

2012-02-23 23:36:36

謝謝。我知道我可以使用jQuery進行序列化，但是反序列化將如何工作？有沒有一個功能，或者我必須從頭開始編寫腳本？ – Christophe 2012-02-24 00:03:28

頁面刷新不在用戶的控制之下，其目的是更新頁面內容（無ajax）。 – Christophe 2012-02-24 00:05:20

@Christophe使用JavaScript更新了我的答案，並提供了關於序列化/反序列化的一些信息。 – 2012-02-24 00:14:39

甲建議的方法

當用戶填寫表單，具有JavaScript的運行，在LocalStorage緩存輸入的數值，一個cookie，或者通過AJAX會話變量。
在頁面加載時，檢查是否存在這些條目，然後用JavaScript填充表單。
在表單提交中，清除條目。

來源

2012-02-23 23:36:46 paislee

使用HTML5網絡存儲 - 它比cookie更快，更安全。您可以查看W3Schools網站的快速和基本樣本：http://www.w3schools.com/html5/html5_webstorage.asp

來源

2012-02-23 23:42:19 Kurt

保留頁面刷新時的表單數據

回答

相關問題