saving/loading settings in a SenchaTouch/PhoneGap -App with localStorage and display them in a form

Question

How you should save/load settings in an app when you want to use the localStorage? Let's say we just want to save a username and a password.

Currently I know two options:

• using a model with store and proxy.
  This seems to be a bit too "big" as you only want to store one object. But you have the advantage to easily use this.load() in the settings FormPanel.
• using the Phonegap or the 'plain' localStorage.
  Then you have to use JSON.stringify and JSON.parse but you store only one object and its easier to load it (after a page refresh I run into some trouble using the store and proxy). But you can't use this.load as you need to load a model. Maybe you need to "cast" the settingsObject from the localStorage to a model and load this one!?

Which approach is better or is there even another, better approach to save/load settings and display them in a form?

Answer 1

I definitely agree with you that using a Sencha Touch model and store is overkill to store some settings. I recommend serializing your settings object with Ext.util.JSON.encode/decode.

Note: You won't be able to serialize the function members of an object though, much less the properties belonging to objects up its prototype chain, so you won't be able to serialize and deserialize an Ext model and have it work when you get it back. The best you could do is serialize the configuration for your Ext component and reconstitute it through its constructor after getting the configuration back.

For most simple settings objects, just serialize it and store it in a key in the local store. When you get to your page, get the settings object out and update your form. When you change a setting in the form, write it to the object. When you leave the page (onbeforeunload), write the object to localstore.