【Sencha Touch】LocalStorageを扱う方法

<script type="text/javascript">

    Ext.regModel("Search", {
        fields: [
            { name: "id", type: "int" },
            { name: "query", type: "string" }
        ],
        proxy: {
            type: 'localstorage',
            id: 'local'
        }
    });

    Ext.regStore('Searches', {
        model: 'Search'
    });

    Ext.setup({

        onReady: function () {

            var txtSearch = new Ext.form.Search({
                placeHolder: 'Search...'
            });

            var btnAdd = new Ext.Button({
                text: 'Add',
                handler: function () {

                    var query = txtSearch.getValue();

                    if (query !== '') {

                        var store = list.store,
                            index = store.find('query', query, 0, false, false, true),
                            instance;

                        if (index == -1) {
                            instance = store.create({ query: query });
                        } else {
                            instance = store.getAt(index);
                        }

                        list.getSelectionModel().select(instance)

                        txtSearch.setValue('');
                    }
                }
            });


            var btnLoad = new Ext.Button({
                text: 'Load',
                handler: function () {
                    list.store.load();
                }
            });


            var btnDelete = new Ext.Button({
                text: 'Delete',
                handler: function () {

                    if (list.getSelectionCount() !== 0) {

                        var records = list.getSelectedRecords(),
                            store = list.store,
                            index;

                        for (var i = 0, n = records.length; i < n; i += 1) {
                            index = store.find('id', records[i].get('id'), 0, false, false, true);
                            store.removeAt(index);
                            store.sync();
                        }
                    }
                }
            });


            var btnRemoveAll = new Ext.Button({
                text: 'RemoveAll',
                handler: function () {
                    list.store.getProxy().clear();
                    list.store.load();
                }
            });


            var list = new Ext.List({
                itemTpl: '{id} : {query}',
                store: Ext.getStore('Searches')
            });


            list.on('itemswipe', function (view, index, item, e) {

                var that = this,
                    store = that.store;

                store.removeAt(index);
                store.sync();
            });


            var toolbar = new Ext.Toolbar({
                dock: 'top',
                ui: 'light',
                items: [txtSearch, btnAdd, btnLoad, btnDelete, btnRemoveAll]
            });


            var panel = new Ext.Panel({
                fullscreen: true,
                layout: { type: 'vbox', align: 'stretch' },
                defaults: { flex: 1 },
                dockedItems: [toolbar],
                items: [list]
            });
        }
    });
</script>