Sencha Touch中使用标准LocalStorage

虽然Sencha Touch本身有和Store关联的LocalStorageProxy，但是使用起来限制性较大，比如复杂的TreeStore就没法正常使用。

 

所以，我使用灵活性更好的Html5标准LocalStorage。

 

下面举例说明用法：

 

首先在App.js中声明全局LocalStorage变量：

 

 

Js代码  

1. Ext.application({  
2.     name : 'MobileOA',  
3.   
4.     platform : typeof WL === 'undefined' ? "" : WL.Client.getEnvironment(),  
5.   
6.     // loads the views used by the app from the app/view folder  
7.     views : [],  
8.   
9.     // loads app/store/Demos.js, which contains the tree data for our main  
10.     // navigation NestedList  
11.     stores : [ 'Navs', 'Attachments', 'ToDos', 'CompanyDocuments', 'DeptDocuments', 'Depts', 'MoreItems' ],  
12.   
13.     // of device detected  
14.     profiles : [ 'Tablet', 'Phone' ],  
15.   
16.     // 本地存储  
17.     localStorage : window.localStorage  
18. )}  

 

 

 

然后自定义一个所有Controller的基类BaseController，在里面添加Set和Get方法，方便其它Controller调用存取持久化内容。

 

Java代码  

1. /** 
2.  * @class MobileOA.controller.BaseController 
3.  * @extends Ext.app.Controller 
4.  */  
5. Ext.define('MobileOA.controller.BaseController', {  
6.     extend : 'Ext.app.Controller',  
7.   
8.     /** 
9.      * 控制所有页面的创建显示 
10.      */  
11.     showView : function(navigation, name) {  
12.         console.log(name);  
13.         var view = Ext.create("MobileOA.view." + name);  
14.         navigation.push(view);  
15.     },  
16.   
17.     animateView : function(name, animate, direction) {  
18.         console.log(name);  
19.         var view = Ext.create("MobileOA.view." + name);  
20.         Ext.Viewport.animateActiveItem(view, {  
21.             type : animate,  
22.             direction : direction  
23.         });  
24.     },  
25.   
26.     /** 
27.      * NavigationView Pop View 
28.      */  
29.     pop : function(navigation, count) {  
30.         // var count = arguments[0] ? arguments[0] : 0;  
31.         if (!count)  
32.             count = 0;  
33.         navigation.pop(count);  
34.     },  
35.   
36.     /** 
37.      * 保存本地存储 
38.      */  
39.     storeSet : function(key, value) {  
40.         this.getApplication().localStorage.setItem(key, value);  
41.     },  
42.   
43.     /** 
44.      * 获取本地存储 
45.      */  
46.     storeGet : function(key) {  
47.         return this.getApplication().localStorage.getItem(key);  
48.     },  
49. });  

 

 

 

在需要使用LocalStorage的Controller中进行相关方法调用

 

Js代码  

1. /** 
2.      * 页面初始化 
3.      */  
4.     onDeptContainerInit : function() {  
5.         var app = this.getApplication();  
6.         var me = this;  
7.         var items = me.storeGet("deptLocal");  
8.         var storeName = "Depts";  
9.         // 如果LocalStorage存在之前保存的JSON格式对象，则从LocalStorage中获取  
10.         if (items != null) {  
11.             store = Ext.getStore(storeName).load();  
12.             store.setData(JSON.parse(items));  
13.             // 否则，从服务器端获取  
14.         } else {  
15.             var data = {  
16.                 adapter : "OADept",  
17.                 procedure : "getDepts",  
18.                 parameters : []  
19.             };  
20.             app.getAdapterProcess(storeName, null, data, true, function(items) {  
21.                 //将从服务器端获取的数据转化成String，并存储在LocalStorage中  
22.                 me.storeSet("deptLocal", JSON.stringify(items));  
23.             });  
24.         }  
25.   
26.     },  

 <script type="text/javascript"> </script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>