如何为 Ajax 请求实现缓存

Question

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

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

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

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

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

Answer 1

看看这些 jQuery 插件：

• http://plugins.jquery.com/project/cache
• http://plugins.jquery.com/project/Tache
• http://plugins.jquery.com/project/jCache

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();

Answer 2

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

var desc_cache=[];

然后像这样创建一个 function ：

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

得到 ajax 数据后，将结果保存到 desc_cache。

Answer 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");

});

Answer 4

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