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

Question

因此，我有一个页面，该页面具有几个与onClick事件的链接，这些事件将从外部文件中检索数据并用此数据填充div。 这按预期工作。 但是，当我刷新页面时，div再次清空。 我想发生的是，刷新后，div将保持检索到的最后内容。

我宁愿不要走小路，也没有考虑将数据添加到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

您可以使用将数据附加到url

window.location.hash

https://developer.mozilla.org/zh-CN/docs/DOM/window.location

如果您在jQuery插件中搜索QueryString，则应该有数十个插件可以简化此任务。

Answer 2

我会使用localStorage。 它就像Cookie，但是维护起来非常容易。 唯一的缺点是并非所有旧版浏览器都支持它（有关浏览器支持，请参见http://caniuse.com/#search=localStorage ）。 有关此功能的概述，请参见https://developer.mozilla.org/zh-CN/docs/DOM/Storage 。 好吧，就我所知，它必须在服务器端完成

Answer 3

没有cookie，您的任务将变得更加艰巨。 但是我可能有两种解决方案：

1. 使用服务器上的会话，您可以控制调用了哪个ajax，因此，下次加载主页时，可以向其附加新内容。
2. 单击#anchorname ，使用url哈希值附加ajax锚点，以便您在重新加载后可以点击它。

Answer 4

该注释告诉您如何在不加载页面的情况下修改url。 您可以使用它。 如果必须使用较旧的浏览器，则仍可以使用该片段（或同时执行这两项操作）。

有一些用于jQuery / JavaScript的历史插件可以管理此问题。这是一种称为“深层链接”的技术。 您也许可以找到一些简单的操作方法。 基本上，当loadContent运行时，您需要将URL从/whatever更新为/whatever#right并使用片段指示加载内容ID或类似内容。

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