Better design for data stored using HTML5 localStorage

Question

I have a scenario on my web application and I would like suggestions on how I could better design it.

I have to steps on my application: Collection and Analysis. When there is a collection happening, the user needs to keep informed that this collection is going on, and the same with the analysis. The system also shows the 10 last collection and analysis performed by the user.

When the user is interacting with the system, the collections and analysis in progress (and, therefore, the last collections/analysis) keep changing very frequently. So, after considering different ways of storing these informations in order to display them properly, as they are so dynamic, I chose to use HTML5's localStorage , and I am doing everything with JavaScript.

Here is how they are stored:

• Collection in Progress: (set by a function called addItem that receives ITEMNAME)

  • Key: c_ITEMNAME_Storage

  • Value: c_ITEMNAME

• Collection Finished or Error: (set by a function called editItem that also receives ITEMNAME and changes the value of the corresponding key)

  • Key: c_ITEMNAME_Storage

  • Value: c_Finished_ITEMNAME or c_Error_ITEMNAME

• Collection in the 10 last Collections (set by a function called addItemLastCollections that receives ITEMNAME and prepares the key with the current date and time)

  • Key: ORDERNUMBER_c_ITEMNAME_DATE_TIME

  • Value: c_ITEMNAME

Note: The order number is from 0 to 9, and when each collection finishes, it receives the number 0. At the same time, the number 9 is deleted when the addItemLastCollections function is called.

For the analysis is pretty much the same, the only thing that changes is that the "c" becomes an "a".

Anyway, I guess you understood the idea, but if anything is unclear, let me know.

What I want is opinions and suggestions of other approaches, as I am considering this inefficient and impractical, even though it is working fine. I want something easily maintained. I think that sticking with localStorage is probably the best, but not this way. I am not very familiar with the use of Design Patterns in JavaScript, although I use some of them very frequently in Java. If anyone can give me a hand with that, it would be good.

EDIT : It is a bit hard even for me to explain exactly why I feel it is inefficient. I guess the main reason is because for each case (Progress, Finished, Error, Last Collections) I have to call a method and modify the String (adding underline and more information), and for me to access any data (let's say, the name or the date) of each one of them I need to test to see which case is it and then keep using split( _ ) . I know this is not very straightforward but I guess that this whole approach could be better designed. As I am working alone on this part of the software, I don't have anyone that I can discuss things with, so I thought here would be a good place to exchange ideas :)

Thanks in advance!

Answer 1

Not exactly sure what you are looking for. Generally I use localStorage just to store stringified versions of objects that fit my application. Rather than setting up all sorts of different keys for each variable within localStore, I just dump stringified versions of my object into one key in localStorage. That way the data is the same structure whether it comes from server as JSON or I pull it from local.

You can quickly save or retrieve deeply nested objects/arrays using JSON.stringify( object) and JSON.parse( 'string from store');

Example: My App Object as sent from server as JSON( I realize this isn't proper quoted JSON)

var data={ foo: {bar:[1,2,3], baz:[4,5,6,7]},
  foo2: {bar:[1,2,3], baz:[4,5,6,7]}
}
saveObjLocal( 'app_analysis', data);

function saveObjLocal( key, obj){
   localStorage.set( key, JSON.stringify(obj)
}

function getlocalObj( key){
   return JSON.parse( localStorage.get(key) );
}

var analysisObj= =getlocalObj('app_analysis');
alert( analysisObj.foo.bar[2])