# 数据缓存+图片缓存 > 引自tcld2269 ## **demo下载地址**：http://pan.baidu.com/s/1i5JqPFZ * * * * * > 设计思路：1.先从本地文件读取数据，如果读取到则直接返回 2.如果本地没有缓存，则前往服务器取数据，然后存到本地 3.如果本地缓存过期（服务器端数据进行了更新），则更新本地缓存文件 * * * * * > 1.通用js，存放在common.js，每个页面都要引用。 var serverurl = "http://xxx.xxx.com/appservice.asmx";//服务器接口路径 var machineurl = "http://xxx.xxx.com";//服务器路径，用于图片显示 ~~~ //缓存方法 function doCache(folder, id, url, callback) { readFile('/' + folder + '/' + id + '.json', function(ret, err) { if (ret.status) { //如果成功，说明有本地存储，读取时转换下数据格式 //拼装json代码 //alert('取到缓存') var cacheData = ret.data; callback(JSON.parse(cacheData)); iCache($('.cache')); //再远程取一下数据，防止有更新 ajaxRequest(url, 'GET', '', function(ret, err) { if (ret) { if (cacheData != JSON.stringify(ret)) { //有更新处理返回数据 //alert('更新缓存') callback(ret); //缓存数据 writeFile(ret, id, folder); iCache($('.cache')); } } else { alert('数据获取失败！'); } }) } else { //如果失败则从服务器读取，利用上面的那个ajaxRequest方法从服务器GET数据 ajaxRequest(url, 'GET', '', function(ret, err) { if (ret) { //处理返回数据 //alert('没取到缓存') callback(ret); //缓存数据 writeFile(ret, id, folder); iCache($('.cache')); } else { alert('数据获取失败！'); } }) } }) } //ajax请求 function ajaxRequest(url, method, datas, callBack) { var serverUrl = serverurl; var now = Date.now(); api.ajax({ url : serverUrl + url, method : method, cache : false, timeout : 30, dataType : 'json', data : { values : datas } }, function(ret, err) { if (ret) { callBack(ret, err); } else { api.alert({ msg : ('错误码：' + err.code + '；错误信息：' + err.msg + '网络状态码：' + err.statusCode) }); } }); } //读文件 function readFile(path, callBack) { var cacheDir = api.cacheDir; api.readFile({ path : cacheDir + path }, function(ret, err) { callBack(ret, err); }); } //写文件 function writeFile(json, id, path) { //缓存目录 var cacheDir = api.cacheDir; api.writeFile({ //保存路径 path : cacheDir + '/' + path + '/' + id + '.json', //保存数据，记得转换格式 data : JSON.stringify(json) }, function(ret, err) { }) } //缓存图片 function iCache(selector) { selector.each(function(data) {! function(data) { var url = selector.eq(data).attr("src"); var img = this; var pos = url.lastIndexOf("/"); var filename = url.substring(pos + 1); var path = api.cacheDir + "/pic/" + filename; var obj = api.require('fs'); obj.exist({ path : path }, function(ret, err) { //msg(ret); if (ret.exist) { if (ret.directory) { //api.alert({msg:'该路径指向一个文件夹'}); } else { //api.alert({msg:'该路径指向一个文件'}); //selector.eq(data).src=path; selector.eq(data).attr('src', null); path = api.cacheDir + "/pic/" + filename; selector.eq(data).attr('src', path); //console.log(selector.eq(data).attr("src")); } } else { api.download({ url : url, savePath : path, report : false, cache : true, allowResume : true }, function(ret, err) { //msg(ret); if (ret) { var value = ('文件大小：' + ret.fileSize + '；下载进度：' + ret.percent + '；下载状态' + ret.state + '存储路径: ' + ret.savePath); } else { var value = err.msg; }; }); } }); }(data); }); }; ~~~ > 2.调用方法。 ~~~ //缓存ID var id = api.pageParam.typeId; //缓存目录，存储地址为 Caches/folder/id.json var folder = "cartype"; //请求地址 var url = "/getCategoryByParentId?parentId=" + id + "&key=" + key; //读取执行 doCache(folder, id, url, function(data) { //处理拼接html //图片样式加上cache }); ~~~ * * * * * > 3.图片缓存的实现。 ~~~ 在需要图片缓存的页面，加上<script src="../../js/zepto.min.js"></script> 然后在doCache回调里面的图片的class加上cache即可自动实现图片缓存 ~~~ ### **备注：需要云模块中添加fs文件模块。** * * * * * * * * * * # 上划翻页的实现 > 自动加载下10条，没有数据的话就显示暂无内容。页数为0的话是用的缓存读取数据，保证了第一次的加载速度。 由于也用到了上面的缓存，所以也需要引用common.js和zepto.min.js ### 1）在apiready中定义当前页码 ~~~ $api.setStorage("resou_index", 0); load(); //上拉翻页 api.addEventListener({ name : 'scrolltobottom' }, function(ret, err) { $api.setStorage("resou_index", $api.getStorage("resou_index") - 0 + 1); load(); }); ~~~ ### 2）数据加载方法 ~~~ //数据加载，first是判断是否重新刷新，index2是传入的当前页码 function load(first, index2) { var index = $api.getStorage("resou_index"); if (index2 != null) { index = index2; } var id = "resou"; var url = "/getGoodsTagList?tag=" + id + "&pageIndex=" + index + "&pageCount=20&key=" + key; if (index == 0) { //默认加载缓存 var folder = "getGoodsTagList"; doCache(folder, id, url, function(data) { dealWithHtml(data, first, index); }); } else { //分页后不加载缓存 ajaxRequest(url, 'get', '', function(data) { dealWithHtml(data, first, index); }); } } ~~~ ### 3）处理回调数据 > 可以使用doT模板 ~~~ function dealWithHtml(data, first, index) { //处理数据html的拼接 } ~~~