Using Local Storage in Sencha Touch 2.2

code | 4-19-2013

The Sencha Touch data model makes working with data really easy. One of the coolest things that the data model provides is an abstraction layer for HTML5 local storage. There are several types of local storage out there right now and they enjoy varying degrees of browser support. Sencha Touch opts for the simple key-value storage because it is supported in basically every relevant browser today.

Since the structure of key-value storage is basically flat, Sencha Touch automatically converts more complex data types like objects and arrays to strings before the data is stored. When the data is accessed later on, Sencha Touch converts it back to the data type it was originally in.

When you generate a new app with Sencha Cmd, you will automatically get a "model" and a "store" directory for your app.

First, we'll create our application:

sencha generate app --name MyApp --path MyApp; cd MyApp

Now, we can generate a model.

sencha generate model Person id:int,firstName,lastName

The model will go into our "app/models" directory. We'll need to make a couple of tiny edits to it to make it work with localstorage:

Ext.define('MyApp.model.Person', {
    extend: 'Ext.data.Model',

    config: {
        fields: [
            { name: 'id', type: 'int' },
            { name: 'firstName', type: 'auto' },
            { name: 'lastName', type: 'auto' }
        ],

        proxy: {
            type: 'localstorage',
            id: 'people'
        }
    }

});

As you can see, we've added a proxy to the model. Now we'll create our People store. This should be called People.js and live under the "app/store" directory:

Ext.define('MyApp.store.People', {
  extend: 'Ext.data.Store',
  config: {
    model: 'MyApp.model.Person',
    autoLoad: true,
    proxy: {
      type: 'localstorage',
      id: 'people'
    }
  }
});

Now, if you add data to the store and sync it, it will persist. Try something like this:

var people = Ext.getStore('People');
console.log(people.data.all); // []
people.add({ firstName: 'Tyson', lastName: 'Cadenhead' });
people.sync();
console.log(people.data.all); // [{ ... }]

If you run that in Chrome and look under "Local Storage", you will see that the record has been added. The data will be maintained in the user's browser unless they clear it. Syncing Sencha Touch apps with local storage is literally that easy.



About the Author

Tyson Cadenhead is a Senior JavaScript Developer at Aloompa. He lives in the greater Nashville area. His specialty is writing large, scalable JavaScript applications on the client and server side. His passions are for good design, usability, and clean, reusable code.

Tags: Sencha LocalStorage

Related Posts:

comments powered by Disqus

Don't Miss Anything!

Sign Up For My Email Newsletter

I Wrote a Book!

Popular Posts