javascript - 保存/恢复浏览器后退/前进按钮上的所有 javascript 变量单击

Question

当按下浏览器后退按钮时，我想恢复一个 ajax 整个修改页面以及内存中的 javascript 变量。它是使用手动添加到浏览器历史记录中的window.history.pushState()。我正在尝试使用以下方法保存/恢复页面：

            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。