Question

这太棒了，我经常看到这个在其他网站上工作但从未在我正在工作的网站上工作。

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

我看到这种情况一直在其他网站上运行，没有更改网址或使用哈希＃是否有一个技巧让它工作或是由浏览器随机决定？
如果我不想使用URL来获取此信息，是否有一个简单的替代方法？

Answer 1

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

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

我要强调的是，我从来没有在任何手册中寻找过 - 所以不能提供任何保证 - 但我已经可靠地使用它一段时间了（因为Netscape !!!）它适用于'很多'浏览器（所有的IE，铬，FF - 但至于其他人，我从来没有尝试过。）

如果有人有更“正确” - 而且不那么乏味 - 我会一个人，很高兴听到它。但这确实可以解决问题。

Answer 2

RES的作者，在/ r / javascript

中找到了您的问题

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

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

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

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

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

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

Answer 3

您可以使用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网站上的历史记录的文档，PushState第三个参数是：

URL - .......此参数是可选的;如果未指定，则将其设置为文档的当前URL。

Answer 4

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

如果您正在构建静态html / js页面，则不会重新加载此类会话和页面。

您可以使用Cookie来达到您想要的效果。

Answer 5

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

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

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

Answer 6

我建议你使用cookies。

虽然HTML5提供了Webstorage，但它可以存储在浏览器中。还有一些JS库处理HTML5 Webstorage。

注意：每个浏览器可以存储的数据大小存在差异。您可以找到有关它的更多信息here。

注意2：攻击用户磁盘空间也存在一些问题，因此您可以预期会更新有关使用webstorage的政策。（http://feross.org/fill-disk/）

在后退按钮上保留动态更改的HTML

6 个答案: