2

If possible, I would like to be able to use shorthand notation to get an item from localStorage and then use JSON.parse() on it.

In my code below, if I use the following it works:

var retrievedObject = JSON.parse(localStorage.getItem('testObject')); //works

However, if I use one of the two following shorthand options, it doesn't work:

var retrievedObject = JSON.parse(localStorage.testObject); //doesn't work

var retrievedObject = JSON.parse(localStorage['testObject']); //doesn't work

All of my code is below and on jsFiddle: http://jsfiddle.net/TestB/1/.

//var retrievedObject = JSON.parse(localStorage.getItem('testObject')); //works
var retrievedObject = JSON.parse(localStorage.testObject); //doesn't work
//var retrievedObject = JSON.parse(localStorage['testObject']); //doesn't work

if (retrievedObject == null) {

  var testObject = { 'one': 1, 'two': 2, 'three': 3 };

  // Put the object into storage
  localStorage.testObject = JSON.stringify(testObject);

}

else {

 retrievedObject.four = 4;

 // Put the object into storage
 localStorage.testObject = JSON.stringify(retrievedObject);

}
// Retrieve the object from storage
var retrievedObject = JSON.parse(localStorage.getItem('testObject'));

console.log('retrievedObject: ', retrievedObject);​
Manuel Allenspach
  • 12,467
  • 14
  • 54
  • 76
Mark Rummel
  • 2,920
  • 10
  • 37
  • 52
  • 1
    Works fine for me here: First run: `retrievedObject: Object one: 1 three: 3 two: 2` Second run: `four: 4 one: 1 three: 3 two: 2` – Jeremy J Starcher Sep 27 '12 at 14:41
  • 1
    For me too... I also made sure to edit the retrieving line in the bottom to `['testObject']` and `.testObject` – Dennis Sep 27 '12 at 14:42
  • The jsFiddle didn't have the working code commented out. I've updated the question with an updated jsFiddle link: http://jsfiddle.net/TestB/1/. – Mark Rummel Sep 27 '12 at 14:54

1 Answers1

3

The problem occurs the first time, when the localStorage.testObject is not yet defined..

In that case localStorage.testObject is undefined and JSON.parse fails with that argument

On the other hand the getItem method handles this internally and returns null..

You could use JSON.parse(localStorage.testObject || null)

Gabriele Petrioli
  • 191,379
  • 34
  • 261
  • 317
  • Thanks! This works! Just so I understand...is the last options stating if `localStorage.testObject` doesn't exist then run `JSON.parse(null)`, which returns `null`? – Mark Rummel Sep 27 '12 at 15:17
  • @Mark yes.. `||` is the logical `OR` and we are using it as a [short-circuit](https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Expressions_and_Operators#Short-Circuit_Evaluation). So if `localStorage.testObject` is `undefined` then it will use `null`. – Gabriele Petrioli Sep 27 '12 at 15:25
  • 1
    @Mark `localStorage.testObject || null` returns the first truthy value in this expression or `null`, so if `localStorage.testObject` yields `undefined` you get `null` which happens to be returned when you access localStorage like you should: via `getItem()`! – Christoph Sep 27 '12 at 15:25
  • @Christoph Why do you say "like you should" about using `getItem()`. Is the other wrong or in some way inferior? – Mark Rummel Sep 27 '12 at 15:36
  • 1
    @mark The getter and setter provide a consistent, standardised and crossbrowser compatible way to work with the LS api and should always be preferred over the other ways. – Christoph Sep 27 '12 at 20:59