Sencha Touch中使用标准LocalStorage

Posted 周二, 07/16/2013 - 23:11 by admin

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

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

下面举例说明用法：

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

Ext.application({
    name : 'MobileOA',
 
    platform : typeof WL === 'undefined' ? "" : WL.Client.getEnvironment(),
 
    // loads the views used by the app from the app/view folder
    views : [],
 
    // loads app/store/Demos.js, which contains the tree data for our main
    // navigation NestedList
    stores : [ 'Navs', 'Attachments', 'ToDos', 'CompanyDocuments', 'DeptDocuments', 'Depts', 'MoreItems' ],
 
    // of device detected
    profiles : [ 'Tablet', 'Phone' ],
 
    // 本地存储
    localStorage : window.localStorage
)}

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

/**
 * @class MobileOA.controller.BaseController
 * @extends Ext.app.Controller
 */
Ext.define('MobileOA.controller.BaseController', {
    extend : 'Ext.app.Controller',
 
    /**
     * 控制所有页面的创建显示
     */
    showView : function(navigation, name) {
        console.log(name);
        var view = Ext.create("MobileOA.view." + name);
        navigation.push(view);
    },
 
    animateView : function(name, animate, direction) {
        console.log(name);
        var view = Ext.create("MobileOA.view." + name);
        Ext.Viewport.animateActiveItem(view, {
            type : animate,
            direction : direction
        });
    },
 
    /**
     * NavigationView Pop View
     */
    pop : function(navigation, count) {
        // var count = arguments[0] ? arguments[0] : 0;
        if (!count)
            count = 0;
        navigation.pop(count);
    },
 
    /**
     * 保存本地存储
     */
    storeSet : function(key, value) {
        this.getApplication().localStorage.setItem(key, value);
    },
 
    /**
     * 获取本地存储
     */
    storeGet : function(key) {
        return this.getApplication().localStorage.getItem(key);
    },
});

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

/**
     * 页面初始化
     */
    onDeptContainerInit : function() {
        var app = this.getApplication();
        var me = this;
        var items = me.storeGet("deptLocal");
        var storeName = "Depts";
        // 如果LocalStorage存在之前保存的JSON格式对象，则从LocalStorage中获取
        if (items != null) {
            store = Ext.getStore(storeName).load();
            store.setData(JSON.parse(items));
            // 否则，从服务器端获取
        } else {
            var data = {
                adapter : "OADept",
                procedure : "getDepts",
                parameters : []
            };
            app.getAdapterProcess(storeName, null, data, true, function(items) {
                //将从服务器端获取的数据转化成String，并存储在LocalStorage中
                me.storeSet("deptLocal", JSON.stringify(items));
            });
        }
 
    },