ExtJs - Unable to save a store to localStorage

I have a store with a localstorage proxy, but I'm unable to save the data. The code is quite simple:

onToolbarTicketsadd: function(me){
    var tickets = this.getStore('Tickets');
    tickets.add({id: 1, name: 'new'})
    console.log(tickets.getById(1), tickets.count())
    tickets.sync({callback: function(){console.log('synched')}})
},

The ticket gets added to the store, as the first console.log proves, but the sync() command does not work. The localStorage inspector only shows an empty entry Tickets: '', and the callback function also does not get called.

What am I missing ? What is necessary for a localstorage proxy to work ?

Note: The problem is not with the browser: I'm on the latest Chrome and Firefox.

Here is the code for the store and the model:

Ext.define('App.store.Tickets', {
    extend: 'Ext.data.Store',
    model: 'App.model.Ticket',
    proxy: {
        type: 'localstorage',
        id: 'Tickets'
    }
});

Ext.define('App.model.Ticket', {
    extend: 'Ext.data.Model',
    fields: [
        {name: 'id', type: 'int'},
        {name: 'name', type: 'string'}
    ]
});

A demo of the problem is here.

If you want to keep the id exclusively for your own field name, then manually setting the idProperty on the model to something else seems to resolve the issue - see this working demo. Take note though, that if it's required you will have to enforce your own uniqueness on the attribute.

Ext.define('MyModel', {
    extend: 'Ext.data.Model',
    idProperty: '_id',  // <-- here 
    fields: [
        {name: 'id', type: 'int'},
        {name: 'name', type: 'string'}
    ]
});