Threaded View

  1. #1
    Sencha User
    Join Date
    Apr 2012
    Billerica, MA
    Vote Rating
    jattardi will become famous soon enough


    Default Answered: Question on local storage and user settings

    I'm adding user settings to my Sencha Touch app, and using local storage to store them, but am not sure the best way to manage it.

    As I've seen suggested in other threads, I have a UserSettings model (I only have one setting so far):

    Ext.define('MyApp.model.UserSettings', {
      extend: '',
      config: {
        identifier: 'uuid',
        fields: [
          { name: 'debugLog', type: 'boolean' }
        proxy: {
          type: 'localstorage',
          id: 'MyApp.UserSettings'
    And then I have a UserSettingsStore store:

    Ext.define('', {
      extend: '',  
      config: {
        model: 'MyApp.model.UserSettings',
        autoLoad: true
    Doing a quick test in my app's launch method, it seems to behave like I want. If there are zero records, it creates one with the default values.

            var settingsStore = Ext.getStore('UserSettingsStore');
            if (settingsStore.getCount() == 0) {
              console.log("No stored settings, creating default");
              settingsStore.add({debugLog: true});
    This works as expected. The first time the app is run, "No stored settings, creating default" is printed to the console then the default settings model is created with debugLog equal to true.

    Here's my question - What's the best way to expose this model instance to other parts of the app that want to work with preferences?

    So, for example, on my settings screen, the user sets debugLog to false. I want to avoid every time calling to the store, loading the instance, then getting/setting values, then syncing. It just seems like a lot of repeated code to me.

    What about creating a helper class, like MyApp.util.SettingsManager, that exposes a simple interface for each setting, e.g. there would be a getDebugLog() and setDebugLog() method which would delegate to looking up the model, setting the value, and syncing it?

    So for example:

    Ext.define('MyApp.util.SettingsManager', {
      getSettingsInstance: function() {
        var store = Ext.getStore('UserSettingsStore');
        if (store.getCount() == 0) {
            // create record with default values
            store.add({debugLog: true});
        return store.getAt(0);
      getDebugLog: function() {
        var instance = this.getSettingsInstance();
        return instance.get('debugLog');
      setDebugLog: function(debugLogValue) {
        var instance = this.getSettingsInstance();
        instance.set('debugLog', debugLogValue);;
    Does this make any sense, or am I completely off base? Is there a usual best practice for a case like this, access to a single global model instance?

  2. I would say that using stores for a simple key-value settings storage is not necessary. Other than getting and setting values, do you really need the advanced features provided with an

    How about simply setting key-value pairs in localStorage? After all, that's what LS is made for. Of course, you can use your own prefix, such as cfg (cfgDebugLog) to make things easier.

    If this sounds like a sound idea, I'd create a singleton, as you initially suggested, but would not create a method for each option. Simply App.UserCfg.get('debugLog') should do. The method would translate this into

    return localStorage.getItem('cfgDebugLog');
    How does that sound to you?

Thread Participants: 1

Tags for this Thread