Question

What is the best way to store object data in HTML5’s localStorage. I haven’t worked much with key value storage.

In my research i’ve seen a few different approaches.

example data:

var commands = [
  {invokes: 'Window', type: 'file', data: '/data/1'},
  {invokes: 'Action', type: 'icon', data: '/data/2'},
  {invokes: 'Window', type: 'file', data: '/data/3'}
];

Approach 1: store keys that represent each data item

// for(...) {
localStorage["command[" + i + "].invokes"] = command[i].invokes
localStorage["command[" + i + "].type"] = command[i].type
localStorage["command[" + i + "].data"] = command[i].data
//}

Approach 2: keys is entity name, store json

localStorage["commands"] = JSON.stringify(commands);

Second approach would require a JSON.parse().

pros/cons?

Answer 1

For the record I went with approach 2. My key is similar to a table name, the value is a json stringified array of records. When retrieving the table you must call JSON.parse().