瀏覽器緩存和歷史記錄后退按鈕（哈希，history.js）

Question

我的瀏覽器后退按鈕有問題。 IE和Google Chrome瀏覽器存在問題。 我正在為搜索引擎創建自動加載機制。 機制的工作原理類似於Google搜索。

建造程序：
1）輸入關鍵字
2）ajax搜索請求
3）作為JSON響應
4）使用json構建結果列表
5）將列表追加到容器

如果我已經建立了結果並重定向到另一個頁面並返回到包含結果的頁面，則結果會消失。 我嘗試了很多開發人員描述的解決方案，例如hashing，history.js等，但每個解決方案都無法正常工作。

Answer 1

當您返回時，頁面的原始HTML是從緩存中加載的。 通過Javascript添加的所有內容都不會存儲，因此您必須在頁面加載時恢復該修改。

為此，您可以使用popstate事件。 當甚至被觸發時，您將需要恢復信息。 您可以通過重新執行AJAX請求並處理結果來做到這一點。 因此，您必須在url（或哈希）中保存足夠的信息，才能再次執行相同的請求。

這也意味着，您可能需要提前提出要求！ 例如，如果執行ajax請求以獲取列表中的項X，則請求后每次X都會遞增（因此您可以在每次點擊時獲得下一項），則需要確保您再次加載所有項。 如果不這樣做，則只會在高速緩存的頁面上獲得原始項目，並獲得AJAXed的最新項目，而中間的項目將丟失。

但是，如果使用pushState或replaceState存儲狀態，則還可以存儲其他數據。 您可以使用它來存儲帶有狀態的JSON結果，因此您不需要其他請求。 無論如何，這是一種優化，並非絕對必要，因此您應該首先實現在popstate上觸發的AJAX請求。 無論如何，您都將需要它，因為數據可能並不總是與狀態一起存儲，因此您將始終需要AJAX請求作為后備。