保存/恢复浏览器上的所有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。