Sencha Touch - localstorage problems

Question

I'm having a few problems with Sencha Touch and localstorage...

1) I am able to save data into localstorage, and it works great until I refresh the page. After that point I can still access the data, appear to make changes, and even add new entries. But as soon as the page is refreshed, all of my updates are gone. Anything that was newly added will be fine, but updates to original entries will not be saved (hopefully this makes sense). Basically, I can create an entry and update it all I want until I refresh the page. At that point it will not save to localstorage again. New entries always save fine though.

2) When I delete all entries my entries and then refresh the page, I get this error in the console: "Uncaught TypeError: Cannot read property 'id' of null". It looks like it's trying to load something even though nothing is there. I'm not sure why it would throw an error in this situation and not when the page is originally loaded since it should be the same thing right?

Model:

    Ext.regModel('inventoryItem', {
        idProperty: 'id',
        fields: [
            { name: 'id', type: 'int' },
            { name: 'date', type: 'date', dateFormat: 'c' },
            { name: 'title', type: 'string' },
            { name: 'quantity', type: 'int' },
            { name: 'size', type: 'int' },
            { name: 'cost', type: 'double' },
            { name: 'startDate', type: 'date' },
            { name: 'endDate', type: 'date' },
            { name: 'dailyAvgCost', type: 'string' },
            { name: 'dailyAvgSize', type: 'string' }
        ]
    });

Store:

    Ext.regStore('inventoryItemsStore', {
        model: 'inventoryItem',
        sorters: [{
            property: 'id',
            direction: 'DESC'
        }],
        proxy: {
            type: 'localstorage',
            id: 'inventory-app-store'
        },
        getGroupString: function (record) {
            return '';
        }
    });

Handler:

     {
             var currentinventoryItem = CostsApp.views.inventoryEditor.getRecord();
             CostsApp.views.inventoryEditor.updateRecord(currentinventoryItem);
             var inventoryStore = CostsApp.views.inventoryList.getStore();
             if (null == inventoryStore.findRecord('id', currentinventoryItem.data.id))
             {
                     inventoryStore.add(currentinventoryItem);
             }

             inventoryStore.sync();
             inventoryStore.sort([{ property: 'date', direction: 'DESC'}]);
             CostsApp.views.inventoryList.refresh();
      }

Can anyone point out something obvious that I'm doing wrong?

Answer 1

I had the same issue and I moved my proxy into the model and this solved my problem. Your code modified should look like this:

Model:

Ext.regModel('inventoryItem', {
    idProperty: 'id',
    fields: [
        { name: 'id', type: 'int' },
        { name: 'date', type: 'date', dateFormat: 'c' },
        { name: 'title', type: 'string' },
        { name: 'quantity', type: 'int' },
        { name: 'size', type: 'int' },
        { name: 'cost', type: 'double' },
        { name: 'startDate', type: 'date' },
        { name: 'endDate', type: 'date' },
        { name: 'dailyAvgCost', type: 'string' },
        { name: 'dailyAvgSize', type: 'string' }
    ],
proxy: new Ext.data.LocalStorageProxy({
    id: 'inventory-app-store'
})
});

Store:

Ext.regStore('inventoryItemsStore', {
    model: 'inventoryItem',
    sorters: [{
        property: 'id',
        direction: 'DESC'
    }],
    getGroupString: function (record) {
        return '';
    }
});

Answer 2

Store sync() has proven very tricky for me, this might help shed some light.

.sync() will not update the remote o localstorage records unless they are dirty. So they will not be persistent.

With a json type reader it's easy to make the mistake of directly modifying a record, one must use the Model's methods to do so, specifically .set(), because set() defines the record as “dirty” and only then sync() will actually save the changes.

This is particularly hard to debug using local storage.

For the following store:

Ext.define('MyApp.store.LocalStuff',{
extend: 'Ext.data.Store',
xtype:'localstuff',

config: {
    fields:['stuffId','stuffName','stuffArray'],
    storeId:'LocalStuffId',
    autoLoad:false,
    proxy:{
        type:'localstorage',
        id:'idForLocalStorage',
        reader: {
            type: 'json',
            rootProperty: 'stuffArray'
        }
    }
}
});

Assuming you´ve populated the store with something like:

{'stuffArray':[
{'stuffId':'130',   'stuffName':'floob',    'stuffArray':[  
                                                            'first',
                                                            'second',
                                                            'tird' //here be a typo (on purpose)
                                                            ]
                                                        },
{'stuffId':'131',   'stuffName':'sateo',    'stuffArray':[  
                                                            'primero',
                                                            'segundo',
                                                            'tercero'
                                                            ]
                                                        },
{'stuffId':'133',   'stuffName':'tolus',    'stuffArray':[  
                                                            'prima',
                                                            'secunda',
                                                            'tertia'
                                                            ]
                                                        }
]
}

To fix the first's record misspelling you might be tempted to do the following:

{//in a given controller or view
someEventHandler:function(){
    var stor = Ext.getStore('LocalStuffId');
    var firstRecord = stor.getAt(0);//which will get you a record in the form of a Model
    firstRecord.get('stuffArray')[2]='third';//that will fix it
    //now we just sync() to make the change persist when we close the app
    stor.sync();
}
}

If you tried this there will be no errors on the console, so, all is ok. Right?

Wrong! The changes won't persist on restart. Why?

Because the records are “clean”.

How can we “dirty” them up?

The only way I found (I'm sure there are plenty more) is by using the method .set() from the Model to update the record, that'll tell the store it's dirty

That sounds odd to my untrained brain on MVC, better fixing the above example.

{//in a given controller or view
someEventHandler:function(){
    var stor = Ext.getStore('LocalStuffId');
    var firstRecord = stor.getAt(0);//which will get you a record in the form of a Model
    //you might go around the following 2 lines in many ways, the important part is .set() after that
    var theArrayToFix = firstRecord.get('stuffArray');
    theArrayToFix[2]='third';

    firstRecord.set('stuffArray',theArrayToFix);//set() dirties the record
    //NOW we sync() to make the change persist when we close the app
    stor.sync();
}
}

All this might be obvious for someone coming from sencha touch 1, but for a newbie like me, it was close to a day's work to figure out.

Hope this helps someone, it will provably help me in the future.

Answer 3

It probably is something else.

You are using “id” as a key name in the model fields, change that to something else like “inventory_id” and try again.

I'm under the impression that id is used internally by the localstorage API, so is reserved.

Answer 4

I know this old, but maybe it will help someone. I had the same problem and try to reset my local storage window.localStorage.clear(); and it works.

Answer 5

Seems all looks good - store.add() method is used in conjunction with store.sync(). Check the way how you load data into the list, may be the data just is not loaded. As for me, store's autoload property does not work always (may be there are some reasons, I don't negate), and I just use store.load() instead. Also, you may check localStorage directly to determine this definitely (i.e. proxy id item localStorage.getItem('inventory-app-store') should give you something like "1,2,3" - the ids of successfully persisted records).

Here is the working example, just in case.

new Ext.Application({
    name: 'MyApp',
    launch: function() {
        this.viewport = new Ext.Panel({
            fullscreen: true,
            id    : 'mainPanel',
            layout: 'card',
            dockedItems: [{
                xtype: 'toolbar',
                dock : 'top',
                items: [{
                    xtype: 'textfield',
                    flex: 1
                }, {
                    text: 'Add',
                    listeners: {
                        tap: function () {
                            var view = this.viewport,
                                list = view.items.first(),
                                store = list.store,
                                fld = view.dockedItems.first().items.first(),
                                val = fld.getValue();
                            store.add({item: val});
                            store.sync();
                            fld.reset();
                        },
                        scope: this
                    }
                }]
            }],
            items : [{
                xtype: 'list',
                itemTpl : '{item}',
                store: new Ext.data.Store({
                    fields: ['item'],
                    proxy: {
                        id: 'items',
                        type: 'localstorage',
                    }
                }).load()
            }]
        });
    }
});

Answer 6

How about you call sync() method before if-condition. It worked for me.

var inventoryStore = CostsApp.views.inventoryList.getStore();
inventoryStore.load();
inventoryStore.sync();