小程序大特点：本地缓存模拟服务器数据库

本来想叫“小程序的特点”，但是转念一想，前端HTML（5）现在也加入了localStorage和sessionStorage的本地缓存操作，这并不是小程序独有的。但不得不说，作为移动端运行的程序，小程序的本地缓存要比网页端的HTML5好多了（更安全）。

小程序的缓存仍然是用了set/get-Stroage的方法：
（app.js）

var dataObj=require("data/data.js");
App({
	onLaunch:function(){
		wx.setStorage({
			key:'postList',
			data:dataObj.postList,
			success:function(){
				//success操作
			},
			fail:function(){
				//fail操作
			},
			complate:function(){
				//无论成功或失败都会调用
			}
		})
	},
})

在代码里，首先通过require加载了data.js文件里的数据。然后在程序 生命周期函数 onLaunch 里 ，使用wx.setStorage方法将数据存入小程序的缓存中。
（带有wx.前缀的方法都是小程序提供的api）

什么是生命周期？
上一篇文章 说过，小程序与vue“难解难分”，那么，小程序当中也有一些用于监听小程序运行状态的函数，在指定时刻 自行调用 ：

• onLaunch ：监听小程序初始化，全局只触发一次，在小程序页面初始化完成后
• onShow ：监听小程序显示，当小程序启动，或从后台进入前台显示时触发
• onHide ：监听小程序隐藏，当小程序从前台进入后台时触发
• onError ：错误监听函数，当小程序发生脚本错误，或者API调用失败时触发，并带上错误信息

小程序缓存永久存在，不会过期，只能手动清除：wx.removeStorage或wx.clearStorage方法，缓存以key:value键值对形式存在，容量不超过10MB

setStorage是异步方法，这对于性能和体验来说是非常不错的，但在日常试验中，还是推荐同步方法：setStorageSync，可以降低代码风险率和调试难度。当然，任何异步方法都有同步方法

上面代码在实际开发完成后，还可以加一句判断（这里为省事用同步方法）：

App({
	onLaunch:function(){
		var storageData=wx.getStorageSync('postList');
		if(!storageData){
			var dataObj=require("data/data.js");
			wx.clearStorageSync();
			wx.setStorageSync('postList',dataObj.postList);
		}
	},
})

这样做可以避免每次启动应用程序都重复初始化数据库。（但在开发过程中，为了避免麻烦，可以不要if，就不用每次手动更新了）

扩展 - 面向对象

ES6-Class和prototype编写缓存类：
（DBPost.js）

var DBPost=function(){
	this.storageKeyName='postList';   //所有文章本地缓存存储键值 - 这里postList可以自己定义
}
DBPost.prototype={
	getAllPostData:function(){
		var res=wx.getStorageSync(this.storageKeyName);
		if(!res){
			res=require("../data/data.js").postList;   //直接取出数据集合（不去操作对象了）
			this.execSetStorageSync(res);
		}
		return res;
	},
	//本地缓存，保存更新
	execSetStorageSync:function(data){
		wx.setStorageSync(this.storageKeyName,data);
	},
};

module.exports={
	DBPost:DBPost
};

这一点倒是更符合js原型（链）的特点了：
<script> function Elem(id) { this.elem=document.getElementById(id); } Elem.prototype.html=function (val) { var elem=this.elem; if(val){ elem.innerHTML=val; //return this; }else{ return elem.innerHTML; } }; Elem.prototype.on=function (type,fn) { var elem=this.elem; elem.addEventListener(type,fn); }; var div1=new Elem('div1'); div1.html('<p>hello mxc</p>').on('click',function () { alert('clicked'); }).html('<p>hello javascript</p>'); </script>

使用缓存类：
（post.js）

var DBPost=require('../../db/DBPost.js').DBPost;   //加载DBPost文件，并取出DBPost
Page({
	data:{
	},
	onLoad:function(){
		var dbPost=new DBPost();   //因为DBPost是函数（有显式原型prototype的是函数），所以要使用它必须先用操作符new将DBPost实例化
		this.setData({
			postList:dbPost.getAllPostData()   //postList是数据文件post.js里的集合对象
		});
	},
})

如果第一行是 var DBPost=require('../../db/DBPost.js') ，只怕代码第六行就要这么写：var dbPost=new DBPost.DBPost(); 了