为啥 Chrome 不缓存我的动态表单字段？

Posted 2023-03-05

【中文标题】为啥 Chrome 不缓存我的动态表单字段？

【英文标题】：Why doesn't Chrome cache my dynamic form field?为什么 Chrome 不缓存我的动态表单字段？

【发布时间】：2015-03-02 11:32:06

【问题描述】：

我在 Symfony2 中遵循 Post/Redirect/Pattern 的简单表单。此表单包含一个 id 文本字段，该文本字段在控制器中动态填充随机值。

我注意到 Chrome 中的一些奇怪行为 - 如果用户提交表单然后点击返回，id 字段包含一个全新的值。如果我编辑这个 id 然后重复这个过程，值 确实 会被缓存，所以看起来 Chrome 只是在看到值发生变化时才会缓存它。

在 Firefox 或 Safari 中不会发生此行为。有没有办法让 Chrome 以同样的方式执行？ this question 中的答案说问题在于使用隐藏字段，但由于我只是使用标准文本字段，所以我不知所措。

【问题讨论】：

也许garlicjs.org可以帮助你...

【参考方案1】：

据我所知，没有标准规定这里​​应该发生什么。所以你不能真正依赖浏览器的行为。

所以，如果当用户按下后退按钮时它应该是新的 id 对您来说真的很重要，那么请使用一些客户端脚本来实现它。无论使用什么浏览器。

【讨论】：

我试图避免使用客户端脚本，因为我想支持没有启用 JS 的用户，但看起来这可能是唯一的选择。谢谢你的回答。

@Jonathan - 您是否知道您的网站访问者中有多少百分比禁用了 JS？

【参考方案2】：

大多数现代浏览器缓存表单输入值。因此，当用户刷新页面时，输入具有相同的值。因此，浏览器获取 html 并使用该值进行输入。

<input value="SOME_VALUE">

但是，如果用户修改了该字段，浏览器将使用用户的值而不是 html 的值。 我建议您将autocomplete="off" 添加到您的 id 字段中。

【讨论】：

正确。但我并不想关闭自动完成功能 - 事实上我问的是相反的情况。

我认为这是在所有浏览器上获得相同行为的唯一方法。这不是你想要的，但在我看来，你应该做的。然后你可以依赖一个跨浏览器的行为......

【参考方案3】：

我建议您使用本地存储来解决这个问题。

<input id="some_id">

<script type="text/javascript">

   localStorage.setItem("ID", "Some Id Value");

   if(! localStorage.getItem("ID"))
     localStorage.setItem("ID", "Some Id Value"); `

     $("#some_id").val(localStorage.getItem("ID"));
</script>

---

您可以检查本地存储是否可用..

if( typeof(Storage) !== "undefined" ) 
 // Your Browser support Local Storage
 else 
 // Your Browser does not support Local Storage

并使用 Chrome 的控制台进行跟踪。我不能为此上传图片。打开 Chrome 的控制台，

资源-> 本地存储-> 您的站点名称