它的适用范围是交互较多,频繁读取数据的web应用。
var xhr = new XMLHttpRequest(),
cache_time = 60 * 60, // 缓存一小时
cache_flag = false, // 第一次打开的时候js不知道是否缓存了
data;
xhr.open('GET', url, true);
xhr.onload = function () {
if (this.status === 200) {
data = JSON.parse(this.responseText);
var code_name= data.Prefix + err_code;
eval( 'var err_msg = data.Err.' + code_name );
resolve( err_msg );
}
};
xhr.onerror = function (e) {
reject( e );
};
if( false == cache_flag ){
xhr.setRequestHeader( "Cache-Control", "private,max-age=" + cache_time );
cache_flag = true ; // 后面再点击的时候,直接读缓存数据
}
xhr.send( null );
第 1 次访问
其http响应头,如下
在缓冲时间内,第 N 次访问 , N > 1
其http响应头,如下
200 OK (from cache)
是浏览器没有跟服务器确认,直接用了浏览器缓存
304 Not Modified
是浏览器和服务器多确认了一次缓存有效性,再用的缓存[一般是F5刷新]。
在 Cache-Control
设置了 max-age
的情况下,max-age
过期后 首次刷新会出现304(如果有更新内容,则是200),之后在max-age缓存过期之前刷新都是200(from cache)
示例数据,如下
|--食品
|---饼干
|---巧克力饼干
|--饮料
|---可乐
|--电子产品
|---手机
|---平板电脑
先取第一层的所有数据
|--食品
|--饮料
|--电子产品
点击其中一层,Ajax获取该层的下一层级的所有数据
|--食品
|---饼干
|--饮料
|--电子产品
后面的以此类推,示例拉取第三层数据
|--食品
|---饼干
|---巧克力饼干
|--饮料
|--电子产品
涉及 localStorage
、sessionStorage
、IndexedDB
存储读取与设置源码 请看 本地缓存 部分代码
localStorage与sessionStorage场景 请搜索ComicCommon.cache_
部分代码
评论列表点此评论