保存/恢復瀏覽器上的所有JavaScript變量/恢復按鈕點擊

Question

我想在按下瀏覽器後退按鈕時，在內存中恢復ajax整個修改後的頁面以及JavaScript變量。它使用window.history.pushState()手動添加到brwoser歷史記錄中。我試圖保存/恢復使用的頁面：

  function changeURL(){ 
       window.history.pushState(document.body.innerHTML,"","..."); 
      } 

      window.onpopstate = function(e){ 
       if(e.state){ 
        document.body.innerHTML = e.state; 
       } 
      }; 

看似這個工作，但只是一個問題，那是在內存中時加載頁面的JavaScript變量已不再存在，因爲它們是通過後續修改阿賈克斯請求，但我沒有做任何規定在按下後退按鈕時恢復它們。我怎樣才能將所有這些值恢復到變量？

Answer 1

1. 編寫一個函數，將所有要跟蹤的變量序列化爲一些易於管理的格式（我建議使用JSON）。
2. 編寫第二個函數，它可以接受序列化的數據並解析/反序列化它，恢復變量（這將成爲第一個函數的鏡像）。
3. 找到一些合理的位置來存儲您的序列化狀態，以便在頁面加載時保留它。就我個人而言，我過去一直使用cookies，但您也可以使用localStorage或您喜歡的任何其他機制。
4. 將代碼添加到您的頁面，以在每次狀態更改時或至少在用戶離開頁面之前的某個點存儲/更新序列化狀態。
5. 將代碼添加到頁面以在頁面加載時檢查存儲/序列化狀態，並在存在頁面時加載它。

編輯：我也建議不要把document.body.innerHTML當作你的序列化「狀態」。應該可以隔離用於修改HTML內容的變量，並將其用作狀態。然後，您可以通過重新應用您的變​​量來重新生成相應的HTML。