Local Storage crashes model definition?

Question

Let's say we have the following structure :

model_Projects owns an array of model_Category. Each model_Category owns an array of model_SubCategory.

I actually have a store of model_Projects which has a localStorage Proxy.

What happens is, when I load sync() and load() my store of model_Projects, in each model_Projects my array of model_Category is the good size and each cell do contain an object.

What is wrong is that each of those objects are not a model_Category object...

Here is my console.log() function of a project

console.log('\n' + this.get('strTitle') + ' - ' + this.get('strType'));
console.log(this.get('strVersion'));
console.log('Event will be on : ' + this.get('dateOfProject') + '\n');


var arrCategory = this.get('arrCategory');
var arrSub;
var arrType;

for(i in arrCategory)
{
    console.log(arrCategory[i].get('strTitle') + '   Total : ' + arrCategory[i].get('numTotal') + '\n');

    //Each Sub Category
    arrSub = arrCategory[i].get('arrSubCategory');
    for(j in arrSub)
    {

        if(arrCategory[i].get('arrSubTotal') === undefined)
        console.log('\t' + arrSub[j].get('strTitle'));
        else
        console.log('\t' + arrSub[j].get('strTitle') + '\t SubTotal : ' + arrCategory[i].get('arrSubTotal')[j]);

        arrType = arrSub[j].get('arrType');
        arrValue = arrSub[j].get('arrValue');
        arrCOFactor = arrSub[j].get('arrCOFactor');
        for( var k=0; k<arrType.length; k++)
        {
            if(arrValue === undefined)
            console.log('\t\t' + arrType[k] + '\t\t Value : ' + 'NA' + '\t\t COFactor : ' + arrCOFactor[k]);
            else
            console.log('\t\t' + arrType[k] + '\t\t Value : ' + arrValue[k] + '\t\t COFactor : ' + arrCOFactor[k]);

        }
        console.log('');
    } 
}

console.log('\n'+this.get('strTitle') + ' - ' + this.get('strType') + '\n');

Here is a project.show() right after being created, read from the project store.

And here is what I get when i project.show() after loading the project store

If we open the error we get the following line crashing :

console.log(arrCategory[i].get('strTitle') + '   Total : ' + arrCategory[i].get('numTotal') + '\n');

seems like arrCategory[i] is not a category model anymore... wtf

Would someone know what is going on?

Answer 1

The doc says:

The LocalStorageProxy uses the new HTML5 localStorage API to save Model data locally on the client browser. HTML5 localStorage is a key-value store (e.g. cannot save complex objects like JSON), so LocalStorageProxy automatically serializes and deserializes data when saving and retrieving it.

Let's say you have a model object:

var category = Ext.create('My.Category', { ... });

This object will be serialized to a JSON string to be persisted in the db. But JSON objects can not have functions, only properties are converted to JSON. That's why you get back a broken object.

You can use this sample code to prove it to yourself:

var o = {foo: 'bar', fn: function() {console.log('Hey!')}};
console.log(o); // => Object {foo: "bar", fn: function}

var json = Ext.encode(o);
console.log(json); // => {"foo":"bar","fn":null}

var o2 = Ext.decode(json);
console.log(o2); // => Object {foo: "bar", fn: null}

Note that the function is lost as soon as the JSON encoding step.