49

太神奇了，我经常在其他网站上看到这个工作，但从来没有在我正在工作的网站上看到。

我正在使用 ajax 引入新内容，我知道 history.js 和 History API，我不想更改 URL，只是让浏览器缓存新的 HTML 内容，这样当用户离开页面并返回时使用后退按钮，它仍然有更新的 HTML。

我看到这在其他站点中一直有效，无需更改 URL 或使用哈希 #。
是否有让它工作的技巧或者它是由浏览器随机决定的？
如果我不想使用 URL 来获取此信息，是否有简单的替代方法？

4

5 回答 5

42

大约十五年来，我一直在使用我曾经通过痛苦的试验和错误发现的两个技巧：输入字段值 - 特别是“隐藏”的值 - 与 URL 一起保存在浏览器的历史记录中 - 并且 - onLoad 事件通过后退（或前进）按钮返回页面时调用。

这意味着您可以在隐藏字段中存储尽可能多的“状态”（记住将它们放在表单中），然后在“onLoad”上“重做”更改。我通常使“渲染”部分成为一个单独的函数......换句话说，在动态发生时，我首先写入隐藏字段 - 然后调用渲染函数。然后我将所有不同的动态渲染函数收集在一起，并从 onLoad 中调用它们。

我要强调的是，我从来没有在任何手册中寻找过这个——所以不能提供任何保证——但我已经可靠地使用了很长一段时间（从 Netscape 开始！！！）它适用于“许多”浏览器（所有 IE , chrome, FF - 但至于其他的，我从未尝试过。）

如果有人有更“正确”且不那么乏味的方式，我会很高兴听到它。但这似乎确实起到了作用。

于 2013-06-09T13:23:32.700 回答
9

RES 的作者在这里，在 /r/javascript 中找到了您的问题

显然，Firefox 最近添加了自己执行此操作的功能，但是当浏览器不为您执行此操作时，没有“好的”方法可以执行此操作。

RES 曾经做的是添加一个 #page=n 标记，其中 n 是您的页码。这样，在页面加载时，RES 知道如果已经有 location.hash，则您必须来自后退按钮 - 不幸的是，当 find 导致您滚动到另一个页面（page = n+1），因为 hashchange 会关闭惹恼用户的查找对话框...

所以现在RES做了一些丑陋和不完美的体操来猜测你是否通过后退按钮到达了页面。每当它加载一个新页面时，它都会将该编号保存在 sessionStorage 中（类似于 localStorage，但在选项卡本地），并在通过后退按钮显示时触发对该页码的请求。

但是：最近我在 FF 和 Chrome 中进行了测试，似乎哈希更改不再“取消”ctrl-f 查找对话框，所以我的建议是你使用它。在页面加载时，如果存在散列，则加载由该散列确定的相关数据。

如果您想变得非常疯狂，您可以将实际的 HTML 内容存储在 localStorage 中，并通过后退按钮在页面加载时重新加载它。这可能不是最有效的做事方式，而且几乎肯定会导致与依赖 DOM 的 javascript 发生冲突，因此请谨慎行事！

“最佳”解决方案实际上取决于您的网站正在做什么/内容的外观/行为。

于 2013-05-11T19:35:00.417 回答
1

您可以像这样使用 History.js 实现您的目标：

function manageHistory(data){

    var History = window.History;
    if ( !History.enabled ) { return false; }        
    History.replaceState({myData: data}, null);
}

$('select.select').change(function(e) { // I am using select tag here to give an example of an HTML action triggerer

    e.preventDefault(); 

    // get data from your select tag

    manageHistory( data)


});

History.Adapter.bind(window, 'statechange', function() { 
    var State = History.getState();

    // Launch the ajax call and update DOM using State.data.myData
});

根据 Mozilla 网站上有关 History 的文档，PushState 第三个参数是：

URL — ....... 这个参数是可选的；如果未指定，则将其设置为文档的当前 URL。

于 2013-05-10T15:17:48.900 回答
0

我认为原因可能是其他网页使用了一些提供会话的后端服务器。

如果您正在构建静态 html/js 页面，则没有这样的会话并且页面只是重新加载。

您可以使用 cookie 来实现您想要的。

于 2013-05-10T09:40:19.737 回答
0

本地存储是一种方式，另一种方式是服务器端持久性。

当在客户端编辑/创建 HTML/更改某些属性时，您需要通过 restful api（或类似的东西）将页面的状态更改与 webstorage 或数据库同步。

当您返回页面时 - 页面可以从本地存储中检索存储的信息...如果您使用服务器端持久性，则需要将它与会话 cookie 结合使用来检索用户的状态更改 - 这然后可以从服务器加载。

于 2013-05-15T19:40:23.983 回答