Jquery OnClick 事件 - 我可以缓存页面，使其不会一次又一次地加载吗？

Question

<a id="aboutTab"href="javascript:void（0）；"onclick="about（）；">关于<a>

当我们点击关于链接时。。它在div中加载about.html，下面是函数

函数（about）｛$（'#idx'）.load（'about.html'）；｝

我希望它应该缓存或其他什么，这样当我下次点击关于我们的信息时，它就不会再加载那个页面了。

目前，每当我点击该链接时，它都会调用about.html。我可以只加载一次吗？如果链接已经被点击，它应该会得到缓存，这样下次就不会再加载了。

About.html是一个非常重的页面，因为它从xml中读取数据。所以，我想只加载一次，如果用户再次点击该链接，就使用缓存。

请提出建议。

Answer 1

(function() {
    var cache = {},
        aboutUsEl = $('#AboutUs');
    var aboutUs = function () {
        if (cache['aboutus']) {
            aboutUsEl.html(cache['aboutus']);
        } else {
            $.get('about.html')
                .done(function(response) {
                    cache['aboutus'] = response;
                    aboutUsEl.html(response);
                });
        }
    };
    aboutUsEl.click(aboutUs);
})();

Answer 2

使用.one

$("#AboutUs").one("click", function() {
   $(this).load('about.html');
})

更新

另一种方法（单击id为的链接将从about.html加载html）

$("a#linkID").click(function (e) { 
      $("#AboutUs").load('about.html');
      $(this).unbind(e.eventType);
});

注：

请参阅.load的附加说明

由于浏览器的安全限制，大多数"Ajax"请求都受到限制同源政策；请求无法成功检索来自不同域、子域或协议的数据。

Answer 3

查看pjax：http://pjax.heroku.com/.一旦PJAX被加载到你的页面上，你就可以这样做（从自述文件中）：

<div id="main"><!--content will be loaded here--></div>
<a href='/explore' data-pjax='#main'>Explore</a>
$('a[data-pjax]').pjax()