Sencha Touch 数据层篇 Proxy(上)

代理：Proxy与数据存取

代理用于处理数据的存取操作，我们通过给store配置代理，来使得store能够访问服务端以及客户端的数据。换句话说，proxy指定了store的数据源。

代理共分为两大类：客户端代理和服务端代理。客户端代理负责本机数据的存取，而服务端代理，则负责远程数据的存取。下面，从比较简单客户端代理开始讲解。

客户端代理

客户端代理又分为内存代理和web存储代理，内存代理很容易理解，就是负责存取内存中的数据。例如我们随手在代码中写出来的一个javascript对象，就可以用内存代理读取。而web存储代理，其实是对HTML5的Web Storage所作的封装。

内存代理(type: 'memory')

内存代理的使用最为简易，内存代理用来读取在内存中的对象，只要将数据对象配置给store即可。也可以调用store的setData()方法来完成这一操作。以下是采用配置的方式，将数据对象配置给store的例子。

}]var store = Ext.create('Ext.data.Store', {
model: 'User',
data: data
});

本地存储代理(type: 'localstorage')

前面提到，使用web存储代理，本质是对HTML5 WebStorage数据的操作。原生HTML5 WebStorage的使用方式简单得令人诧异。我们使用web存储，只需要认识localStorage和sessionStorage这两个浏览器内置的对象就行。这两个对象都有setItem(key,value)、removeItem(key)、getItem(key)、clear()、key(index)方法。直接调用就像这样：

localStorage.key = value;

在ST中，使用WebStorage代理，只要配置个Id作为主键就行了。更新完store的数据后，要记得调用sync方法，才能将数据保存至浏览器的本地存储中。以下是完整的例子：

,
extend: 'Ext.data.Model'
})]
成功执行完毕后，打开浏览器的调试窗口，使用Chrome浏览器的话，只要点击Resources选项卡，展开左侧的Local Storage点击里面的Local Files，就可以在右侧看到刚才插入的数据了。如果你使用火狐浏览器的话，就在DOM选项卡中查看。如果你用的是其他的浏览器的话，就问度娘和谷歌吧。



注意：Sencha Touch 2.0 pr1和pr2中存在bug，会导致本地存储无法正常使用。在这里，威老给出一个比较好的解决方案，供大家学习使用。

威老采取的做法是重写一个本地存储代理，让它覆盖原有的代理的type。因此上述代码不用改变，仅需在使用之前引入我们重写的这个本地存储代理类。并且，一旦官方修正了这个问题，只需要将这个类的引入移除即可，不用修改其它源码。重写的代理类如下：

Ext.define('MyLocalStorage',{//类名可以自己改。
alias: 'proxy.localstorage',//覆盖原有的localstorage的type
extend: 'Ext.data.proxy.LocalStorage',
batch: function(operations, listeners){
var me = this,
batch = Ext.create('Ext.data.Batch', {
//			proxy: me,	//Batch没有对proxy进行初始化因此此句无效。
listeners: listeners || {}
}),
useBatch = me.batchActions,
records;
batch.proxy = me;//把设置proxy的工作移到Batch创建完毕后。
Ext.each(me.batchOrder.split(','), function(action){
records = operations[action];
if (records) {
if (useBatch) {
batch.add(Ext.create('Ext.data.Operation', {
action: action,
records: records
}));
}
else {
Ext.each(records, function(record){
batch.add(Ext.create('Ext.data.Operation', {
action: action,
records: [record]
}));
});
}
}
});
batch.start();
return batch;
}
});

大家可以把这个类放到一个单独的文件里，要用到本地存储的时候，就引入它。

会话存储代理(type: 'sessionstorage')

localStorage和sessionStorage的用法是一致的。唯一不同点就是，sessionStorage只在一次会话中生效，浏览器关闭的同时，数据清除；而localStorage是永久的存储，用户下次打开浏览器的时候，数据还在。