HTML5 localStorage design questions

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?