客户端缓存

Ajax缓存场景

它的适用范围是交互较多，频繁读取数据的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获取该层的下一层级的所有数据

|--食品
  |---饼干
|--饮料
|--电子产品

后面的以此类推，示例拉取第三层数据

|--食品
  |---饼干
    |---巧克力饼干
|--饮料
|--电子产品

HTML5本地存储

涉及 localStorage、sessionStorage、IndexedDB

localStorage 与 sessionStorage 例子

存储读取与设置源码 请看 本地缓存 部分代码

localStorage与sessionStorage场景 请搜索ComicCommon.cache_ 部分代码

IndexedDB 待更新