javascript - 如何在页面重新加载时清除 HTML 表单,而不是在用户导航返回页面时清除?

标签 javascript html reload back-button

我正在使用以隐藏形式存储一些数据的技巧,以便能够持久保存它,这样当用户离开页面然后使用“返回”按钮返回时,我可以将数据恢复到页面无需再次访问服务器...

但是,这个技巧意味着当用户单击刷新或重新加载时会发生同样的事情...(甚至是 Firefox 中的 shift-reload)。我想检测用户是在单击重新加载而不是单击后退按钮,这样我可以在重新加载时重新开始,但在用户导航离开和返回时仍然恢复以前的数据。

有没有办法做到这一点?我一直在调查 onbeforeunload 事件等,但还没有弄清楚任何事情。

编辑以解决 Josh 的“为什么?”问题:

该页面是带有一堆 AJAX 过滤器的搜索结果页面。用户可能会花费相当多的时间来调整过滤器以获得他们想要的搜索结果集......然后如果他们点击离开页面或在 URL 栏中输入新地址......然后返回到页面,如果我不做这样的事情,他们将不得不重新开始并重新进行所有过滤。对于我们引入可用性测试的用户来说,这是一次非常令人沮丧的体验。

精通技术的用户可能会通过打开一个新选项卡而不是单击/键入来解决这种问题,但不幸的是,我们的绝大多数用户并不精通技术,因此显而易见的解决方案是让当用户导航回页面时页面恢复过滤器/结果。

另一方面,我可以想到用户可能会重新加载页面的两个原因:

  1. 搜索页面上的结果中包含时间敏感元素,用户可能希望获得更多最新结果。
  2. 有时可能会出现页面未正确加载的错误。在这两种情况下,如果我将页面恢复到保存状态,他们将获得相同的(旧的和/或损坏的)结果,而不是他们期望的新鲜/修复的结果。

希望一切都过去了。

最佳答案

您或许可以在服务器端通过查看随请求发送的 header 来执行此操作。当用户执行刷新或硬刷新时,会使用某些 header 。

使用 Fiddler 或 Firebug 检查 header 以查看您可以使用的内容。

至少对于 Firefox,按 F5 会导致

Cache-Control: max-age=0

要发送的标题。按 Ctrl-F5 发送这些

Pragma: no-cache
Cache-Control: no-cache

有关其他浏览器行为的分割,请查看 this excellent answer另一个问题。

关于javascript - 如何在页面重新加载时清除 HTML 表单,而不是在用户导航返回页面时清除?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1280088/

相关文章:

javascript - Yii2 Ajax 提交不起作用

javascript - 编译 CoffeeScript 时添加不需要的 js 代码

javascript - React Native 将组件/对象属性传递给 OnPress 函数

javascript - 在 IE8 中将 javascript 数据下载到文件

javascript - 如何在迷你图表中显示轴标签?

swift - UITableview Swift 中的行相互覆盖

unity-game-engine - Unity3D - 通过 Application.LoadLevel 重新加载场景后出现问题

javascript - 返回时 HTML5 重新加载页面

javascript - 如何使用 jQuery/JavaScript 从下拉列表中删除所有选项

html - 为什么fa图标和a不在同一行