Question

所以，我有一个页面，其中有几个与onClick事件的链接，这些链接将从外部文件中检索数据并用这些数据填充div。这按预期工作。然而，当我刷新页面时，div再次清空。我想要发生的是，在刷新之后，div将保留最后检索的内容。

我不想走下cookie之路，并考虑在URL中添加数据，我认为这是我想要的方式。

是否有一些不错的JQuery调用可以在单击链接时将数据附加到url，然后在刷新时将所需内容还原到div？

我的loadContent函数是：

function loadContent (url, container) {
    var target = $(container);
    target.load(url, function (text, statusText) {
        if (statusText === "success") {
            target.find("a[rel^='gridnav']").initgn();
        }   
    });
}

编辑：我忘了提及行

target.find("a[rel^='gridnav']").initgn();

用于在加载的新内容上重新初始化脚本。

因此，当我单击链接时，onClick事件会调用此函数

<a href="#" onClick="loadContent('xyz.html', '#right')">TEST</a></li>

其中xyz.html仅包含div中所需的数据“#right”

有没有办法编辑这个功能来做我想做的事？

Answer 1

您可以使用

将数据附加到网址

window.location.hash

https://developer.mozilla.org/en-US/docs/DOM/window.location

如果你在jQuery插件中搜索QueryString，应该有几十个简化这项任务的插件。

Answer 2

我使用localStorage。它就像饼干一样，但更容易维护。唯一的缺点是所有旧版浏览器都不支持它（有关浏览器支持，请参阅http://caniuse.com/#search=localStorage）。有关该功能的概述，请参阅https://developer.mozilla.org/en-US/docs/DOM/Storage如果您想完全不使用类似cookie的功能;那么它必须在我所知的情况下完成服务器端

Answer 3

如果没有cookie，您的任务将会更加困难。但我可能有两个解决方案：

在服务器上使用会话，您可以控制已调用的ajax，因此下次加载主页时，您可以将新内容附加到该页面。
使用url hash附加ajax锚点已经点击#anchorname，因此您可以在重新加载后点击它获得收益。

Answer 4

评论告诉您如何在不加载页面的情况下修改网址。你可以用它。如果你必须使用旧的浏览器，那么你仍然可以使用片段（或做两件事）。

jQuery / JavaScript有一些历史插件可以管理它......这是一种称为“深层链接”的技术。您可以找到一些简单易用的东西。基本上，当loadContent运行时，您需要使用指示加载内容ID或类似内容的片段将网址从/whatever更新为/whatever#right。

另一种替代方法是在最初加载页面时在服务器上设置一些加载到该div的标志，这也可以为您节省ajax请求。但是，根据您的服务器代码的设置方式，这可能对您不起作用。

页面刷新后重新加载ajax检索的数据

4 个答案: