如何保留html內容歷史記錄以使按鈕工作？

Question

美好的一天！

我正在構建一個移動應用程序。 我有index.html“屏幕A”，其中onSubmit調用javascript函數：

$.get(myRemoteURL, function(data) {
document.open();
document.write(data);
document.close();
}, "text");

然后用制作webservice RQ獲得的新內容“屏幕B”覆蓋頁面。 這個內容是jquery移動內容，我在Java標簽中以編程方式構建，包含移動視圖所需的所有“div”和“page”元素。

然后，我再創建一個Web服務RQ並再次重復類似的javascript函數調用，用新的jquery移動內容“屏幕C”替換從該webservice RQ獲得的新數據。

問題：我找不到一種方法讓“后退”按鈕從“屏幕C”正常工作到“屏幕B”。 我有點能夠通過使用window.history.go（-2）從“屏幕B”返回到“屏幕A”（window.history.length說7但是為什么確切的-2才能回到index.html我不知道）。

最大的問題是我無法從“屏幕C”回到“屏幕B”。 我試圖獲取我替換它的內容替換的HTML內容。 我嘗試使用JSON localStorage將“屏幕B”的內容存儲在一個變量中，這樣我就可以用“屏幕B”的存儲內容替換“屏幕C”的內容，但這不起作用。 我也有錯誤

"Exception in thread "http-bio-8080-exec-402" java.lang.OutOfMemoryError: PermGen space" 

當試圖在JSON localStorage中存儲“屏幕B”的內容時 - 從webservice RQ和移動內容獲得的數據在1-2MB范圍內。

請問，有人可以建議一種實現“后退”按鈕機制的方法，這樣我可以從“屏幕C”返回到“屏幕B”嗎？ 我應該使用cookies嗎？ 或者有沒有辦法在歷史中保留“屏幕B”內容？

添加：

按照要求。 我向C過渡添加了有關“屏幕B”的更多信息。 在“屏幕B”中我有移動頁面，程序邏輯或者在“屏幕B”內的那些頁面之間切換，或者使新的web服務RQ切換到“屏幕C”。 我切換到“屏幕C”的方式類似於從index.html到“屏幕B”，即我在我的標記類（為“屏幕B”構建jquery-mobile內容）中使用編程方式構建GET參數這些參數我然后用來制作webservice RQ來獲取“屏幕C”的數據。 在“屏幕B”中它是：

<a href="" onClick="switchToScreenC(_hidden_id_value, urlForScreenC)">Select</a>        

我有_hidden_​​id_value是隱藏的輸入字段，用於存儲使Web服務RQ獲取“屏幕C”數據所需的值。

然后我的javascript：

urlForScreenC = urlForScreenC + "?parameter=" + $("#" + _hidden_id_value).val();

$.get(urlForScreenC, function(data) {
document.open();
document.write(data);
document.close();
}, "text");

提前感謝您的協助。

勝利者。

Answer 1

我想提一下，使用localStorage確實可行。 根據docs localStorage允許至少5MB。 我使用了來自webservice響應的最大數據測試，並成功存儲和檢索了數據：

商店：

localStorage.setItem("screenB", document.documentElement.outerHTML);

檢索：

function goBackToScreenB()
{
document.open();
document.write(localStorage.getItem("screenB"));
document.close();
}

因此，“屏幕C”調用goBackToScreenB（），這個存儲的內容成功顯示，就像按下“后退”按鈕一樣。

我還查看了history.pushState（）作為評論員之一從developermozilla網站建議，但是history.pushState（）允許的最大內容大小似乎只允許最大640K字符，他們建議使用localStorage作為替代方案。

希望這個解決方案可以幫助其他人作為實現具有大HTML內容的“后退”按鈕功能的技術。

謝謝，維克多。

Answer 2

試試這個，可能對您有所幫助：

 history.forward();