浏览器是否可以缓存 Javascript/DOM 更改？答案

【问题标题】：Is it possible for the browser to cache Javascript/DOM changes?浏览器是否可以缓存 Javascript/DOM 更改？
【发布时间】：2012-07-19 22:53:24
【问题描述】：

我正在开发一个使用 Javascript 进行样式设置的表单，该表单将用于提交许多不同的内容。但是，大多数情况下，不同的东西只会略有不同，因此如果当您按下浏览器上的 Back 按钮时，表单与您提交前离开时的表单完全相同，这将真正使用户受益表格。

注意：这在使用普通的 HTML/Javascript-less 表单时已经有效，我要问的问题是如何在使用 Javascript 隐藏/替换输入字段等时保留此功能。

我尝试过History.js 和 HTML5 的replaceState()，但似乎没有任何效果。此外，如果有帮助，这将是一个需要安装最新浏览器的私人网站，因此请不要犹豫，推荐仅在最新浏览器版本中可用的解决方案。

非常感谢！

更新 #1：这是一张更能说明我需要的图片。

更新 #2：好的，我成功破解了它，包括跨浏览器。明天睡了一会儿，我会发布解决方案。

【问题讨论】：

当您提交 ajax 以创建历史条目时，您不能在 url 末尾使用 # (yourUrl.html#fake1) 吗？在他们提交之前有过吗？
对不起！意思是说我使用 Javascript 进行表单样式设置，而不是 AJAX 提交哈哈！已更新。
simsalabim.github.com/sisyphus ?
这不是我真正想要的。如果我在输入数据后刷新页面，表单应该是空的。如果我输入日期，提交表单，然后通过浏览器按 Back，表单仍应包含数据并显示页面所做的任何 Javascript 更改。有点像 Javascript/DOM 更改等的缓存。
用图片更新了问题，希望能更好地说明问题。

【解决方案1】：

好的，所以我回到绘图板并尝试使用我已经知道存在的工具来解决问题。每个浏览器的情况（通常，没有测试过任何非主流浏览器）是，当您在提交表单后按下返回按钮时，文本输入字段通常是人口稠密。我想看看这对隐藏的输入字段是否同样有效，结果是这样！

接下来我设置了一些 Javascript 事件来监听页面加载。

if($.browser.mozilla)
{
    $(window).on('pageshow', pageManager.init);
}
else
{
    $(pageManager.init);
}

这适用于 Chrome、Firefox 和 IE9。我还没有测试过任何其他浏览器，但这些是唯一可用于我的私人网站的浏览器，所以对我来说已经足够好了。我相信您可以根据自己的需要设置自己喜欢的解决方案，但这对我来说最有效。

无论如何，上面的代码意味着每次页面加载时，pageManager.init() 都会运行。下面是我用来检查 Back 按钮是否被按下的代码摘录，这不仅仅是页面刷新或首次访问：

if($('input[name="form_submitted"]').val() != '')
{
    // back button was pressed
}

如您所见，它就像检查隐藏的表单字段是否包含值一样简单。要真正保证会设置一个值，请确保在提交表单时设置：

$('#my-form').submit(function()
{
    $('input[name="form_submitted"]').val('true');
}

真的就这么简单。这是我能想到的确定浏览器的 Back 按钮是否被按下的最佳方法之一。现在，要缓存可见字段的所有表单值，只需在字段上使用JSON.stringify() 并将其全部粘贴到稍后解码的隐藏字段中即可。

【讨论】：

【解决方案2】：

AFAIK，这通常是手动处理的。也就是说，您使用主题标签或 pushState（带有适当的状态对象）并在哈希更改或 popstate 上获取哈希/状态，并根据需要（重新）构建您的 DOM。

（请注意，我在那里将两种截然不同的场景合二为一，抱歉。如果您只使用哈希更改，您可能不会使用pushState，因为pushState 不会触发onhashchange 根据MDN。）

【讨论】：