Ext.data.proxy.LocalStorage是Ext.data.proxy.WebStorage的子类,使用HTML5的LocalStorage API在客户端保存数据,由于HTML5的LocalStorage不能存储复杂数据,因此在读写操作时LocalStorage代理会自动序列化和反序列化数据。
LocalStorage代理经常用来保存不需要存储在服务端的用户信息,这些信息不回在浏览器关闭后消失,可以长期保存。
Ext.onReady(function ()
{
//创建数据模型
Ext.regModel("User", {
fields: ["id", "name", "age"],
proxy: {
type: "localstorage", //使用Ext.data.proxy.LocalStorage代理
id: "User-Searches" //代理数据的唯一标识
}
});
var store = new Ext.data.Store({
model: "User"
});
//添加数据
store.add({ name: "张三", age: 20 });
store.add({ name: "李四", age: 30 });
//保存数据
store.sync();
//读取数据
store.load();
var msg = [];
store.each(function (rec)
{
msg.push(rec.get("id") + " " + rec.get("name") + " " + rec.get("age"));
});
alert(msg.join("\n"));
});
由于用到了HTML5的DOMStorage特性,上述代码需要在支持Html5浏览器中才能运行,在浏览器关闭后数据不回消失,因此,在运行关闭再次访问页面后,Store的数据会不断增加。
将上述代码中的type修改为为sessionstorage后,即为Ext.data.proxy.SessionStorage,使用HTML5的session storage API在客户端保存数据,与LocalStorage的区别在于当浏览器关闭时数据会丢失,不适合长期保存数据,其他的使用方式相同。
注意:如果页面不关闭而是刷新操作,HTML5的session storageApI也会对数据进行累计,因为刷新页面并没有创建新的会话,所以数据不回被清空。