太神奇了,我经常在其他网站看到这个功能,但从没在我工作的网站上看到过。
我正在使用ajax引入新内容,我知道有history.js和History API,但我不想更改URL,只是希望浏览器缓存新HTML内容,以便当用户离开页面并通过后退按钮返回时,仍然具有更新后的HTML内容。
我经常在其他网站看到这个功能,而且它们没有更改URL或使用哈希#标记。
有什么技巧可以让它正常工作,还是由浏览器随机决定?
如果我不想使用URL来传递信息,有没有更简单的替代方案?
太神奇了,我经常在其他网站看到这个功能,但从没在我工作的网站上看到过。
我正在使用ajax引入新内容,我知道有history.js和History API,但我不想更改URL,只是希望浏览器缓存新HTML内容,以便当用户离开页面并通过后退按钮返回时,仍然具有更新后的HTML内容。
我经常在其他网站看到这个功能,而且它们没有更改URL或使用哈希#标记。
有什么技巧可以让它正常工作,还是由浏览器随机决定?
如果我不想使用URL来传递信息,有没有更简单的替代方案?
在过去的十年半中,我发现了两个技巧,曾通过痛苦的试验和错误找到: 输入字段值 - 特别是“hidden”值 - 与 URL 一起保存在浏览器的历史记录中 - 而且返回页面时会调用 onLoad 事件。
这意味着您可以在隐藏字段(请记得将它们放入表单中)中存储尽可能多的“状态”,然后在 “onLoad” 上重新执行更改。 我通常将“渲染”部分作为一个单独的函数...换句话说,在动态发生时,我首先写入隐藏字段,然后调用渲染函数。 然后,我将所有不同的渲染功能汇总在一起,针对各种动态性并从 onLoad 调用它们。
我要强调的是,我从未在任何手册中查找过这些信息 - 因此无法提供任何保证 - 但我已经可靠地使用它一段时间了(从 Netscape 开始!!!)。 它适用于“许多”浏览器(所有 IE、Chrome、Firefox-至于其他浏览器,我从未尝试过。)
如果有人知道更“正确”和不那么乏味的方法,我很乐意听到。 但是这似乎已经可以解决问题了。
我是 RES 的作者,在 /r/javascript 找到了你的问题。
显然,Firefox 最近添加了自己完成此操作的功能,但当浏览器无法为您完成此操作时,没有“好”的方法可以完成此操作。
RES 以前所做的是添加一个 #page=n 标记,其中 n 是您的页码。这样,在页面加载时,如果已经有 location.hash,RES 就知道您必须是通过返回按钮进入的 -- 不幸的是,这种特定行为会破坏 Firefox 和 Chrome 中的 ctrl-f 查找功能,因为查找会导致您滚动到另一页(page = n+1),因为哈希更改会关闭查找对话框,这会让用户感到烦恼...
因此,现在 RES 做了一些丑陋和不完美的体操来猜测您是否通过返回按钮到达该页面。每次加载新页面时,它都会将该数字保存在 sessionStorage 中(类似于 localStorage,但仅限于选项卡),并在通过返回按钮显示时发送该页面号的请求。
但是:最近我在 FF 和 Chrome 中进行了测试,似乎哈希更改不再“取消” ctrl-f 查找对话框,因此我的建议是您使用它。在页面加载时,如果存在哈希,请加载由该哈希确定的相关数据。
如果您想要变得非常疯狂,还可以将实际的 HTML 内容存储在 localStorage 中,并在通过返回按钮重新加载页面时重新加载它。这可能不是最有效的方法,并且几乎肯定会导致依赖于 DOM 的 JavaScript 发生冲突,因此请谨慎行事!
“最佳”解决方案实际上取决于您的网站正在做什么/该内容的外观/行为如何。
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
});
URL — ....... 此参数是可选的;如果没有指定,它将设置为文档的当前URL。
我认为原因可能是其他网页使用了一些提供会话的后端服务器。
如果您正在构建静态的HTML/JS页面,那么就没有这样的会话,页面只会重新加载。
您可以使用cookie来实现您想要的功能。
本地存储是一种方式,另一种方式是服务器端持久化。
当在客户端编辑/创建/更改某些属性时,您需要通过WebStorage或数据库通过RESTful API(或类似的东西)同步页面状态更改。
当您返回页面时,页面可以从本地存储中检索存储的信息...如果您正在使用服务器端持久性,则需要与会话cookie一起使用它以检索用户的状态更改-然后可以从服务器加载。