【问题标题】:How do you clear an HTML form on page reload but not when the user navigates BACK to the page?如何在页面重新加载时清除 HTML 表单,但在用户导航回页面时不清除?
【发布时间】:2010-11-19 18:54:17
【问题描述】:

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

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

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

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

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

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

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

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

希望能解决这个问题。

【问题讨论】:

    标签: javascript html reload back-button


    【解决方案1】:

    如果您无法使用基于表单的方法,您可能需要研究一个“ajax 历史”库,例如 RSH

    【讨论】:

      【解决方案2】:

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

      使用 Fiddler 或 Firebug 检查标头,看看您可以使用什么。

      至少对于 Firefox,按 F5 会导致

      Cache-Control: max-age=0
      

      要发送的标头。做一个 Ctrl-F5 发送这些

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

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

      【讨论】:

      • 这很有趣...看起来可能很痛苦,因为我必须单独处理所有不同的浏览器,但我会进一步调查。
      【解决方案3】:

      当我加载包含表单的页面时,我会像您一样填写我之前存储的值,但随后会从我的会话中清除该数据。第二次页面刷新将找不到存储的数据并提供一个空白表单。如果表单被重新提交,那么我将新数据存储回会话中,准备按下后退按钮...

      【讨论】:

      • 问题是这个(隐藏的)表单永远不会被提交——数据只会从 javascript 写入它(当用户与页面交互时,我将一个对象图序列化到它)并且它总是被重新加载如果页面存在,则在页面加载时...
      猜你喜欢
      • 1970-01-01
      • 2016-01-23
      • 2017-05-13
      • 2011-02-10
      • 2017-02-27
      • 1970-01-01
      • 2016-08-12
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多