在Javascript中缓存Ajax响应的可能技术是什么？
我正在实现一个Javascript模块管理器，通过XHR对象加载javascript文件。这种方法的问题是资源缓存：
- 首先，
XHR依靠内置的浏览器缓存机制，这是可以的，但它的行为取决于浏览器implementation. - Also有一个
localStorage和一个basket.js，它使用localStorage来缓存下载的脚本，问题是在有限的存储大小，通常是5-10MB。此外，localStorage是许多脚本的共享位置，这些脚本也使用它来存储数据。 - 还有一个
ServiceWorker应用程序接口的Cache接口，但它只在ServiceWorker运行时可用，所以它很可能适合我的需要。
有没有人知道他在项目中使用的一些聪明的新旧javascript缓存技术，或者可能听说过？
注意：请不要建议使用jQuery .ajax，它是XHR的接口，或任何其他实现内置Javascript功能接口的库。
编辑：有一些有价值的建议：
- 使用名为localForage的库。这个库代表了IndexedDB，WebSQL和localStorage的统一应用程序接口，使用哪一个取决于浏览器。
- 使用IndexedDB，它是真正强大的存储，没有明显的空间限制。唯一需要关注的是，只有现代浏览器才会实现IndexedDB。
回答 5
Stack Overflow用户
发布于 2015-11-17 17:48:30
这是特定于JQUERY的...
您可以将ajax设置为缓存。
$.ajaxSetup({ cache: true});如果您不想对特定的调用进行缓存响应，那么可以调用
$.ajax({
url: ...,
type: "GET",
cache: false,
...
});如果您想要相反的(特定呼叫的缓存)，您可以在开始时设置为false，为特定呼叫设置true
如果你想存储ajax响应的结果，你可以使用Local Storage。所有现代浏览器都为您提供了存储apis。您可以使用它们(localStorage或sessionStorage)保存数据。
您所要做的就是在收到响应后将其存储到浏览器存储中。然后，下次您找到相同的呼叫时，搜索响应是否已保存。如果是，则从那里返回响应；如果不是，则进行新的调用。
Smartjax plugin也做类似的事情；但是因为您的需求只是保存调用响应，所以可以在jQuery ajax成功函数中编写代码来保存响应。在进行调用之前，只需检查响应是否已保存。
Stack Overflow用户
发布于 2015-11-24 14:08:48
由于indexeddb是一种用于客户端存储数据的方法，因此允许索引数据库查询。
下面是受支持的浏览器http://caniuse.com/#feat=indexeddb
这是唯一的问题
Firefox (prior to version 37) and Safari do not support IndexedDB inside web workers.
Not supported in Chrome for iOS or other iOS WebViews.
Chrome 36 and below did not support Blob objects as indexedDB values.Here is another similar polyfill you can try，但在我(尽管有限)的经验中，这两个polyfills都是but /不完整的。他们在报告问题的人的GitHub上也都有许多公开的问题。当我测试其中一个(我忘了是哪一个)时，它比原生IndexedDB慢得多。
也许创建一个像样的polyfill是可能的，但目前的polyfill似乎并没有做好这项工作。
我应该使用已被弃用的WebSQL吗？
WebSQL的问题在于它永远不会在IE或火狐浏览器中被支持。如果你只针对手机浏览器，你也许可以使用WebSQL，至少在Firefox OS或Windows Phone抢占大量市场份额之前是这样。
是否有计划在未来为所有不支持的浏览器支持IndexedDB？
让我们说清楚。你问的是苹果的情况，因为其他所有人都在他们最新的浏览器中支持IndexedDB (iOS Chrome使用苹果的渲染引擎，因为苹果不允许他们做其他任何事情)。
苹果不仅不支持IndexedDB，他们还没有公开谈论过它(据我所知……我已经做了相当多的搜索)。这看起来很奇怪。因此，据我所知，没有人知道苹果是否计划支持IndexedDB。阴谋论者认为，也许他们试图破坏HTML5应用程序，迫使人们编写原生应用程序，但这纯粹是猜测。
总而言之，这让我们开发人员处于一个非常糟糕的境地。没有好的跨平台解决方案。我建议你向苹果投诉这件事。这就是我所做的，我已经要求我的用户在iOS上使用我的基于索引数据库的应用程序来做同样的事情。苹果公司仍然没有任何消息。
正如WWDC2014中声明的那样，iOS 8现在支持索引数据库更新-但不幸的是it's broken pretty badly。
还要考虑到子资源完整性-
子资源完整性使浏览器能够在没有意外操作的情况下验证文件的交付。
没有已知的问题？到目前为止？
我建议你可以选择
如果您的主要目标是移动设备，则基于Subresource的解决方案
indexeddb如果移动设备不是您的主要目标，请使用公开可用的移动设备实现
如果以上所有内容对您来说太复杂了，那么
var localCache = {
data: {},
remove: function (url) {
delete localCache.data[url];
},
//a cached version exists
exist: function (url) {
return !!localCache.data[url] && ((new Date().getTime() - localCache.data[url]._) < localCache.timeout);
},
get: function (url) {
console.log('Getting in cache for url' + url); //log only!
return localCache.data[url].data;
},
set: function (url, cachedData, callback) {
localCache.remove(url);
localCache.data[url] = {
_: new Date().getTime(),
data: cachedData
};
if ($.isFunction(callback)) callback(cachedData);
},
timeout: 600, //in seconds
};
$.ajaxPrefilter(function (options, originalOptions, jqXHR) {
if (options.cache) {
var complete = originalOptions.complete || $.noop,
url = originalOptions.url;
//remove jQuery cache as you have your own localCache
options.cache = false;
options.beforeSend = function () {
if (localCache.exist(url)) {
complete(localCache.get(url));
return false;
}
return true;
};
options.complete = function (data, textStatus) {
localCache.set(url, data, complete);
};
}
});
$(function () {
var url = 'your url goes here';
$('#ajaxButton').click(function (e) {
$.ajax({
url: url,
data: {
test: 'value'
},
cache: true,
complete: doSomething
});
});
});
//ToDo after ajax call finishes, or cached version retrived
function doSomething(data) {
console.log(data);
}Stack Overflow用户
发布于 2015-11-23 04:47:43
另一个具体的JQUERY答案？
不确定它是否回答了您的问题，但这可能会有所帮助。它使用超时来缓存ajax调用。
在预过滤中，列出您想要添加以进行缓存的各种PHP ajax调用。在此示例中，启用了10分钟超时的缓存。
/*----------------------------*/
/* set ajax caching variables */
/*----------------------------*/
$.set_Ajax_Cache_filters = function () {
var localCache = {
timeout: 600000, // 10 minutes
data: {}, //@type {{_: number, data: {}}}
remove: function (url) {
delete localCache.data[url];
},
exist: function (url) {
return !!localCache.data[url] && ((new Date().getTime() - localCache.data[url]._) < localCache.timeout);
},
get: function (url) {
return localCache.data[url].data;
},
set: function (url, cachedData, callback) {
localCache.remove(url);
localCache.data[url] = {
_: new Date().getTime(),
data: cachedData
};
if ($.isFunction(callback))
callback(cachedData);
}
};
/*----------------------*/
/* set ajax pre filters */
/*----------------------*/
$.ajaxPrefilter(function (options, originalOptions, jqXHR) {
// list of allowed url to cache
if (url !== '..............file.php') {
return false;
}
if (options.cache) {
var complete = originalOptions.complete || $.noop,
url = originalOptions.url;
options.cache = false;//remove jQuery cache using proprietary one
options.beforeSend = function () {
if (localCache.exist(url)) {
complete(localCache.get(url));
return false;
}
return true;
};
options.complete = function (data, textStatus) {
localCache.set(url, data, complete);
};
}
});
};https://stackoverflow.com/questions/33717097
复制相似问题