如何实现Ajax请求的缓存

I have simple application, that shows list of many items, where user can display detail for each item, which is obtained by Ajax.

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

However, if user closes the detail and opens again, application makes another Ajax request, to get the same content again.

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

Is there any simple solution how to prevent this by caching requests on client, so when the user displays the same detail again, the content will be loaded from cache. Preferably using jQuery.

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

I think this could be solved with proxy object, which would store request when its made for the first time, and when the request is made again, proxy will just return previous result without making another Ajax request.

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

But I'm looking for some simpler solution, where I won't have to implement all this by myself.

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

4 个解决方案

#1

Take a look at these jQuery plugins:

看看这些jQuery插件：

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

jQache sample:

// [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

IMHO simplest way is to create a global array:

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

var desc_cache=[];

and then create a function like this:

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

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

After getting ajax data save results to desc_cache.

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

#3

Another jQuery cache plugin where you can set expiration and dependencies on objects:

另一个jQuery缓存插件，您可以在其中设置对象的过期和依赖关系：

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

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

jCacher sample code:

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

You can create one or two classes to encapsulate the fact that you are caching; you can then use either AJAX or cache interchangeably. See here: http://myok12.wordpress.com/2011/08/19/building-an-almighty-data-retrieval-system-for-all-html5-webapps/

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