在浏览器后退/前进按钮上保存/恢复所有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。