如何为 Ajax 请求实现缓存答案

【问题标题】：How to implement cache for Ajax requests如何为 Ajax 请求实现缓存
【发布时间】：2010-10-17 01:55:42
【问题描述】：

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

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

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

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

但我正在寻找一些更简单的解决方案，我不必自己实现所有这些。

【问题讨论】：

标签： javascript ajax caching jquery

【解决方案1】：

看看这些 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();

【讨论】：

【解决方案2】：

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

var desc_cache=[];

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

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

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

【讨论】：

同意。既然 Javascript 可以满足您的所有需求，为什么还要下载另一个插件？

【解决方案3】：

另一个 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");

});

【讨论】：

【解决方案4】：

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

【讨论】：