在浏览器返回/forwd 按钮单击时保存/恢复所有 JavaScript 变量

Save/ restore all javascript variables on browser back/forwd button click

本文关键字：恢复 保存 JavaScript 变量 单击 返回 浏览器 forwd 按钮      更新时间：2023-09-26
当

按下浏览器后退按钮时，我想恢复整个修改后的页面以及内存中的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 请求修改，但我没有做出任何规定来在按下后退按钮时恢复它们。如何将所有这些值恢复到变量中？

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

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

相关文章：