Saving and loading data with HTML5 Local Storage

1. Start by defining the UserSetting model with the following fields. We are going to
assign userID as the idProperty and you will see why this is important later.
Ext.define('UserSetting', {
extend: 'Ext.data.Model',
idProperty: 'userID',
fields: [{
name: 'userID',
type: 'int'
}, {
name: 'fontSize',
type: 'string'
}, {
name: 'theme',
type: 'string'
}, {
name: 'language',
type: 'string'
}, {
name: 'dateFormat',
type: 'string'
}]
});

2. Add a proxy to the UserSetting model, setting the proxy type to localstorage.
We need to give the proxy a unique key prefix for storing items in localStorage. To do
this set id: 'user-settings'.
Ext.define('UserSetting', {
...
proxy: {
type: 'localstorage',
id: 'user-settings'
}
});

3. Now create an instance of the UserSetting model and assign it to the
settings variable.
var settings = Ext.create('UserSetting', {
userID: 1,
fontSize: 'medium',
theme: 'default',
language: 'en-gb',
dateFormat: 'd/m/Y'
});

4. Call the save method on the model instance to persist the data to localStorage.
settings.save();

5. Having saved data to localStorage it is now time to retrieve it. Load the data by
calling the load method on the UserSetting class. Pass in the userID to the first
parameter and a load configuration object to the second parameter. Add a callback
to the load configuration object to prove that we are able to retrieve the data.
UserSetting.load(1, {
callback: function(model, operation){
console.log(model.get('language'));
}
});