Ajax更新了用户界面和后退按钮

Question

情境：

• 页面上加载了复杂的用户界面。
• 用户执行一些通过Ajax回调改变数据的操作，通过DOM操作（例如通过jQuery）在UI上反映更改。
• 用户点击链接转到另一个页面（比如详细信息页面）。
• 用户点击后退按钮返回原始用户界面页面。
• 用户看到过时的信息 - 看起来他所做的更改（在步骤2中）从未发生过。

你如何处理这种情况？

Answer 1

缓存数据。用户离开页面并返回后保存信息的唯一方法是使用cookie。

更好的方法是

0. user goes to your page 
1. A page is loaded with complex UI based on what is saved in the users cookies (default if no cookie)
2. user does some actions, which are saved into the cookie
3. user goes to another page

Answer 2

当按下后退按钮时，您可以强制刷新页面，然后从服务器中提取更新的数据。

<META http-equiv="Cache-Control" content="no-cache">
<META http-equiv="Pragma" content="no-cache">
<META http-equiv="Expires" content="-1">

您可能还想查看Real Simple History，看看您是否可以利用他们的技术来使用“后退”按钮。

Answer 3

无论传递到下一页的数据是什么，都需要传回来将UI更改为所需的方式。

这可以使用cookie完成，也可以使用post数据/服务器端逻辑完成。只需将值传递给第二页，当用户想要返回时，请务必将其传回，并根据值更改界面。您甚至可以使用会话，但是如果这是您需要它的唯一地方，我认为这可能有点过头了。

大都市

Answer 4

Cookie不是唯一的方法。想想jQuery BBQ插件。见http://mattfrear.com/2010/03/20/enabling-browser-back-button-on-cascading-dropdowns-with-jquery-bbq-plugin/

基本上，它使用添加到查询字符串中的#variables来欺骗浏览器认为它是一个新页面，因此如果您要刷新或返回页面，＃变量将重新填充控件。