Sencha Touch中使用标准LocalStorage

虽然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));
			});
		}

	},

作者: thierry.xing
原文: http://thierry-xing.iteye.com/blog/1901912