Sencha Touch 2 : LocalStorage Proxy使用

一.功能
建立使用LocalStorage Proxy的Store
讓你可以用store來操作localStorage的存取

二.建立Model
要當作localStorage操作用的Store，所使用的model,強制必須使用系統產生的id值，
因此會有以下幾個限制
1.不可使用idProperty
idProperty是用來指定特定field當若id值用，因此在這裡不可使用
2.資料欄位不可以有id
因為必須由系統幫每筆model資料產生id屬性值，所以要放在model內的資料不可用id當作屬性名稱
例

Ext.define("Test.model.ItemModel", {
    extend: "Ext.data.Model",    
    config: {       
        fields: [
            { name: 'uid', type: 'string' },
            { name: 'fName', type: 'string' },
            { name: 'lName', type: 'string'}                   
        ]      
    }
});

三.建立Store
1.設定storeId
可以在操作時使用Ext.getStore(storeId)來參考到這store
2.設定proxy
設定type:'localstorage'即為使用LocalStorage Proxy
設定id值,這id值會當作在localStorage內用來在localStorage內產生真正儲存的變數名稱

例

Ext.define("Test.store.ItemStore", {
    extend: "Ext.data.Store",
    requires:['Ext.data.proxy.LocalStorage'],
    config: {
        model: "Test.model.ItemModel",
        storeId:'hahaha',      
        proxy: {
            type: 'localstorage',
            id  : 'mylocal'
        }      
    }
});

四.儲存
當加入資料到store,產生model，會自動在model的資料內插入id屬性，也會在model上產生一個internalId屬性

1.指令

store.add([{..},{...}]) 加入資料
store.sync() 寫到localStorage上

2.實體儲存內容
實體儲存分成兩個部份，
一個是以設定的proxy id值當作變數，用來儲存所有的資料id
例
proxy id設定為mylocal
則會實際在localStorage內產生
localStorage.mylocal='1,2,3,4..'
這些id是系統在將每筆資料建立成model時,自動產生插入的

另一部份真正資料儲存在
以proxy id與model id所組成的變數內
例
localStorage.mylocal-1="{....}"
localStorage.mylocal-2="{....}"
.....

五.讀取
要將資料由localStorage載入store內

store.load()

若原本store內有資料,但localStorage內是空的,
則會把原本store內資料清掉

五.清除資料
1.清除store資料

store.removeAll();

2.清除localStorage資料

store.getProxy().clear()