修改的div不保留它們的值在後退按鈕上

Question

我有一個窗體和一些使用jquery修改的div。

在表單提交時，用戶被帶到另一個頁面。

現在，當用戶按下返回按鈕時，修改後的div不會保留。只保留表單值。

保留修改後的div的最佳方法是什麼？或者至少應該有一些我可以通過後退按鈕捕捉的事件，以便我可以重新修改這些div。

謝謝。

Answer 1

作爲Paul的答案的一個修正：當然，你只需要跟蹤那樣的狀態，如果你會失去用戶輸入，例如因爲你添加了返回後不再存在的輸入元素。

如果您只需在HTML中的「靜態」輸入元素中重建用戶數據的DOM狀態，那麼您「僅」需要額外觸發您的函數「onload」（或DOM準備就緒）。

說，例如，你顯示/隱藏取決於複選框一個div：

<input type="checkbox" id="myCheckBox" onclick="showHideMyDiv(this)"> 
<div id="myDiv"> ... </div> 

然後你的事件處理程序（showHideMyDiv）的呼叫添加到window.onload處理程序（不實際使用window.onload - 這只是一個例子，但是使用addEventListener/attachEvent或jQuery等框架）。

window.onload = function() { 
    showHideMyDiv(document.getElementbyId("myCheckBox")); 
} 

這將工作，獨立於用戶如何到達那裏，第一次，或與後退按鈕。

Answer 2

實現此目的的一種簡單方法是跟蹤URL中的頁面狀態。你可以用JavaScript做到這一點，或使用像這樣的jQuery的歷史插件：

http://tkyk.github.com/jquery-history-plugin/

然後，當頁面加載（第一次還是在後退按鈕被擊中），你可以設置頁面的狀態基於查詢字符串值。