apicloud缓存

一、缓存详情页内容（归类：单个页面缓存数据，通过传入的 id 获取）：

<div class="detail" id="listData"></div>
<script id="section" type="text/doTtemplate">
    {{ }}
        <div class="des">
            <div class="com">所需积分： <span>{{=it.INTEGRAL}}</span> 分</div>
            <    div class="com">兑换限量： {{=it.Num || '不限'}} </div>
            <div class="com">配送说明： <span>免费包邮</span>（{{=it.PEISONG}}）</div>
        </div>
    {{ }}
</script>

js部分：
思路：通过 api.readFile 根据 giftid 读取缓存数据，如果有，执行 if（）；如果没有，执行 else ，通过 ajax 请求获取数据并使用 api.writeFile 存储数据，方便下次获取。

function getDetailData(giftId){
    var cacheDir = api.cacheDir;
    api.readFile({
        path: cacheDir + '/' + giftId + '/' + api.frameName + '.json'
    }, function(ret, err){
        if(ret.status){
            var addDatalistCardTpl = doT.template(document.getElementById('section').innerHTML);
            document.getElementById("listData").insertAdjacentHTML('beforeEnd', addDatalistCardTpl(JSON.parse(ret.data)));
        }else{
            var param = {
                GIFT_ID: giftId
            }
            boktour._postAjax(
                boktour._url+'Integral.aspx',
                {
                    UserId: $api.getStorage('LOGIN_DATA').UserId,
                    CompanyId: $api.getStorage('LOGIN_DATA').CompanyId,
                    Action: 'getProductDetail',
                    Param: JSON.stringify(param)
                },
                function(ret){
                    if(ret.Data && ret.Data!=''){
                        api.writeFile({
                            path: cacheDir + '/' + giftId + '/' + api.frameName + '.json',
                            data: JSON.stringify(ret.Data)
                        })
                        var addDatalistCardTpl = doT.template(document.getElementById('section').innerHTML);
                        document.getElementById("listData").insertAdjacentHTML('beforeEnd', addDatalistCardTpl(ret.Data));
                    } else {
                        document.getElementById("listData").innerHTML = '<div class="fa18 pd10">暂无更多详情</div>';
                    }
                }
            )
        }
    })
}

二、缓存 frameGroup 下的 frame 中列表数据内容（归类：多个 frame 缓存数据，通过 frame 获取的 id 获取数据）：

<div class="row pd list" id="listCard"> </div>
<script id="listBox" type="text/doTtemplate">
    {{ for(var i in it){ }}
        <div class="col-xs-4">
            <div class="item" tapmode >
                <img src="{{=it[i].PIC}}" alt="" />
            </div>
            <div class="des">{{=it[i].LINETYPE_NAME}}</div>
        </div>
    {{ } }}
</script>

js部分：

function getProductList(){
    var cacheDir = api.cacheDir, id;
    switch (api.frameName) {
	case '1':
	    id = $api.getStorage('productGID');
	    break;
	case '2':
	    id = $api.getStorage('productCID');
	    break;
	case '3':
	    id = $api.getStorage('productZID');
	    break;
    }
    api.readFile({
        path: cacheDir + '/' + id + '/' + api.frameName + '.json'
    }, function(ret,err){
        if(ret.status){
            var listBoxTpl = doT.template(document.getElementById('listBox').innerHTML);
            document.getElementById("listCard").innerHTML = listBoxTpl(JSON.parse(ret.data));
        }else{
            var param = {
                TYPE_FLAG: api.frameName
            }
            boktour._postAjax(
                boktour._url + 'Line.aspx',
                {
                    UserId: $api.getStorage('LOGIN_DATA').UserId,
                    CompanyId: $api.getStorage('LOGIN_DATA').CompanyId,
                    Action: 'getLineType',
                    Param: JSON.stringify(param)
                },
		function(RET){
                    if(RET.Data && RET.Data.length > 0){
                        api.writeFile({
                            path: cacheDir + '/' + RET.Data[0].LINETYPE_ID + '/' + api.frameName + '.json',
                            data: JSON.stringify(RET.Data)
                        })
                        var listBoxTpl = doT.template(document.getElementById('listBox').innerHTML);
                        document.getElementById("listCard").insertAdjacentHTML('beforeEnd', listBoxTpl(ret.Data));
                        switch (api.frameName) {
                            case '1':
                                $api.setStorage('productGID', RET.Data[0].LINETYPE_ID);
                                break;
                            case '2':
                                $api.setStorage('productCID', RET.Data[0].LINETYPE_ID);
                                break;
                            case '3':
                                $api.setStorage('productZID', RET.Data[0].LINETYPE_ID);
                                break;
                            default:
                                break;
                        }
                    } else {
                        document.getElementById("listCard").innerHTML = '<div class="fa18 pd10">暂无产品线路</div>';
                    }
                }
            )
        }
    })
}

板块一与板块二的区别：

板块一为单个页面，只需通过传入商品的 id，便可获得相关数据；可也判断是否有该 id 的数据。
板块二为 frameGroup 中的多个 frame，每个 frame 对应一个 id，在存入缓存时需要动态获取一个 id，在有相关数据时加载页面，动态获取 id，再通过该 id，获取缓存数据并加载。

结合以上例子说具体点就是：
1、板块二中需要以下代码获取 id，而板块一中只需用上一个页面传来的 id：

switch (api.frameName) {
    case '1':
        id = $api.getStorage('productGID');
        break;
    case '2':
        id = $api.getStorage('productCID');
        break;
    case '3':
        id = $api.getStorage('productZID');
        break;
}

2、板块二中需要以下代码存入 id，而板块一不需要：

switch (api.frameName) {
    case '1':
        $api.setStorage('productGID', RET.Data[0].LINETYPE_ID);
        break;
    case '2':
        $api.setStorage('productCID', RET.Data[0].LINETYPE_ID);
        break;
    case '3':
        $api.setStorage('productZID', RET.Data[0].LINETYPE_ID);
        break;
    default:
        break;
}

注：在 ajax 获取到数据后，使用 api.writeFile 存储数据时，需先将数据转格式，使用 api.readFile 读取数据时再转回来：

api.writeFile({
    path: cacheDir + '/' + RET.Data[0].LINETYPE_ID + '/' + api.frameName + '.json',
    data: JSON.stringify(RET.Data); //此处 JSON.stringify 转格式
})
api.readFile({
    path: cacheDir + '/' + id + '/' + api.frameName + '.json'
}, function(ret,err){
    if(ret.status){
    var listBoxTpl = doT.template(document.getElementById('listBox').innerHTML);
    document.getElementById("listCard").innerHTML = listBoxTpl(JSON.parse(ret.data)); //此处 JSON.parse 转格式
}

猜你喜欢