如何实现Ajax请求的缓存

时间:2009-04-02 09:48:51

标签: javascript ajax caching jquery

我有一个简单的应用程序,它显示了很多项目的列表,用户可以在其中显示每个项目的详细信息,这是由Ajax获得的。

但是,如果用户关闭详细信息并再次打开,则应用程序会再次发出Ajax请求,以便再次获取相同的内容。

是否有任何简单的解决方案如何通过在客户端缓存请求来防止这种情况,因此当用户再次显示相同的详细信息时,将从缓存加载内容。最好使用 jQuery

我认为这可以通过代理对象来解决,代理对象在第一次进行时会存储请求,并且当再次发出请求时,代理将只返回先前的结果而不会发出另一个Ajax请求。

但我正在寻找一些更简单的解决方案,我不需要自己实现这一切。

4 个答案:

答案 0 :(得分:2)

看看这些jQuery插件:

jQache示例:

// [OPTIONAL] Set the max cached item number, for example 20
$.jCache.maxSize = 20; 
// Start playing around with it:
// Put an item into cache:
$.jCache.setItem(theKey, theValue);
// Retrieve an item from cache:
var theValue = $.jCache.getItem(theKey);
// Clear the cache (well, I think most of us don't need this case):
$.jCache.clear();

答案 1 :(得分:2)

恕我直言最简单的方法是创建一个全局数组:

var desc_cache=[];

然后创建一个这样的函数:

function getDesc(item){
if(desc_cache[item]) return desc_cache[item] else $.ajax(...);
}

获取ajax数据后,将结果保存到desc_cache。

答案 2 :(得分:1)

另一个jQuery缓存插件,您可以在其中设置对象的过期和依赖项:

http://plugins.jquery.com/project/jCacher

jCacher示例代码:

$(document).ready(function() {

    $.jCacher.add("key", "value");

});

$(document).ready(function() {

    var cacheItem = $.jCacher.get("key");
    alert(cacheItem.value + " was retrieved from the cache");

});

答案 3 :(得分:0)

您可以创建一个或两个类来封装您正在缓存的事实;然后,您可以互换使用AJAX或缓存。见这里:http://myok12.wordpress.com/2011/08/19/building-an-almighty-data-retrieval-system-for-all-html5-webapps/