在浏览器后退/前进按钮单击上保存/恢复所有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变量不再存在，因为后续的ajax请求会对它们进行修改但是我没有做出任何恢复它们的规定按钮。如何将所有这些值恢复到变量？

Answer 1

1. 编写一个函数，将您要跟踪的所有变量序列化为一些易于管理的格式（我建议使用JSON）。
2. 编写第二个可以接受序列化数据并对其进行解析/反序列化的函数，随时恢复变量（这将是您第一个函数的镜像）。
3. 找到一个合理的位置来存储您的序列化状态，以便在页面加载时保留它。我个人在过去曾经使用过cookie，但你也可以使用localStorage或任何其他你喜欢的机制。
4. 在每次状态更改时，或者至少在用户离开页面之前的某个时刻，向页面添加代码以存储/更新序列化状态。
5. 在页面加载时向页面添加代码以检查存储/序列化状态，如果存在则加载它。

编辑：我还建议不要将整个document.body.innerHTML视为序列化“状态”。应该可以隔离用于修改HTML内容的变量，并将其用作您的状态。然后，您可以通过重新应用变量来重新生成相应的HTML。