浏览器后退和前进并形成自动完成混乱答案

【问题标题】：Browser back & forward and form autocomplete mess浏览器后退和前进并形成自动完成混乱
【发布时间】：2018-04-05 14:54:43
【问题描述】：

在我们的 webapp 上，页面包含一个带有一些字段的过滤器表单，一个调用 jQuery AJAX 的 SEARCH 按钮，根据过滤器表单数据加载项目。我们从 javascript 将表单过滤器值推送到 url 以维护浏览器历史记录。

当我们按下 BACK 按钮时，页面“重新加载”，但我们看到表单值没有刷新到当前值。检查页面源代码，我们看到 html 包含具有正确 value 属性的文本框元素（来自 url 值），但文本框仍显示表单的最后一个值。有时。有时它会起作用。

我们在表单值中添加了 autocomplete="off"，这有点帮助，“有时”转到“通常”，显示的值通常与 html 源匹配。但不总是。我们认为浏览器缓存是坏人——当我们按下后退或前进按钮时，有时页面不会刷新，而是来自“某处”。

我们添加了网络配置缓存设置：

<caching>
 <outputCacheSettings>
   <outputCacheProfiles>
     <add name="CacheProfileNone" noStore="true" varyByParam="*" duration="0" />
   </outputCacheProfiles>
 </outputCacheSettings>
</caching>

并将属性添加到控制器操作中

[OutputCache(CacheProfile = "CacheProfileNone")]
public ActionResult Index(QueryViewModel model)
{...}

但这没有帮助。 :( 有时当我们按下后退按钮时，会显示错误的表单值，与 html 值不匹配。表单值没有使用自定义 javascript 函数进行操作。我们在 console.log 输出中添加了 onchange 事件，并且看不到任何日志消息，所以我们认为表单元素的显示值不取决于我们的决定或代码，但（我们认为）它取决于浏览器的东西。

我们正在开放新的建议下一步做什么，让浏览器始终加载页面并显示在 html 源代码中定义的当前值。

欢迎提出任何建议！谢谢！

【问题讨论】：

标签： javascript ajax browser

【解决方案1】：

我猜（因为你没有提供代码），但这并不像你想象的那样工作：

我们从 javascript 将表单过滤器值推送到 url 到维护浏览器历史记录。

您需要调查 History API replaceState() 方法。

参考这里：

https://developer.mozilla.org/en-US/docs/Web/API/History_API

【讨论】：

是的，正如我所见，当我们将 url-s 推送到历史记录时，浏览器会将它们存储在历史记录列表中，但是单击 BACK，url 会更改，但不会重新加载页面。
我们的 Web 开发人员做了一个重大发现，pushState 在浏览器历史记录中添加了一个新的 url，但这并不是她想要做的——因为浏览器在导航时不会重新加载这个 url回到历史。现在她试图在没有 pushShate 或 replaceState 的情况下解决问题......新方法......但你的回答对她了解什么是根本问题非常重要。谢谢！