Storing JSON array in HTML5 storage not working

Question

Here is my HTML code, Here i am storing json Array in localstorage. I want to iterate json later anytime but its showing it undefined. How can i iterate over stored json Array using js ?

<!DOCTYPE html>
<html>
<head>
<script>
var ob=[
   {
     "id":1,
     "name":"one"
   },
   {
     "id":2,
     "name":"two"
   }
];
function clickCounter() {alert("dsdsd");
    if(typeof(Storage) !== "undefined") {
        if (sessionStorage.ob) {
            sessionStorage.ob = ob;
        } else {
            sessionStorage.ob = undefined;
        }

        alert(sessionStorage.ob[0].id);
        for (var i in sessionStorage.ob)
        {
           alert(sessionStorage.ob[i].id);
        }    

    } else {

    }
}
</script>
</head>
<body>
<button onclick="clickCounter()" type="button">Click me!</button>
</body>
</html>

Mitya · Accepted Answer · 2015-04-11 11:34:04Z

9

localStorage, like cookies, is for storing strings. If you attempt to store a complex object in storage it will first be cast to its string representation.

Therefore, you need to stringify when saving it and parse it back into a complex object when attempting to iterate over it later.

Save:

var obj = {foo: 'bar'};
localStorage.setItem('obj', JSON.stringify(obj)); //<-- saved as JSON string

Read later:

var obj = JSON.parse(localStorage.getItem('obj'));
for (var i in obj) {
    alert(i+' = '+obj[i]); //<-- "foo = bar"
}

answered Apr 11, 2015 at 11:34

Mitya

34.8k15 gold badges70 silver badges126 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Manish Kumar Over a year ago

One quick question - will localstorage be ideal replacement for storing data in it instead of storing into session ?

Mitya Over a year ago

Well localStorage IS sort of session data - it's just it's stored client side rather than server. Your choice should be based on the sensitivity of the data, and what environment needs to access it. JS can access data saved over localStorage, but server side languages can't, but can instead access session data.

Gaël Barbin Over a year ago

I think the OP talks about the difference between localStorage and sessionStorage. Both are on client. stackoverflow.com/a/15166867/1064270

Gaël Barbin · Accepted Answer · 2015-04-11 11:46:45Z

2

You can not store object, you have to stringify then parse them.

var ob=[
   {
     "id":1,
     "name":"one"
   },
   {
     "id":2,
     "name":"two"
   }
];

sessionStorage.ob= ob;
console.log(sessionStorage.ob);

sessionStorage.ob= JSON.stringify(ob);
console.log(JSON.parse(sessionStorage.ob));

http://jsfiddle.net/ofLozkhc/

edited Apr 11, 2015 at 11:46

answered Apr 11, 2015 at 11:32

Gaël Barbin

3,9463 gold badges32 silver badges53 bronze badges

Comments

Joshua Arvin Lat · Accepted Answer · 2015-04-11 11:34:43Z

0

You might want to try using a plugin instead such as this one: https://github.com/joshualat/jquery-local-storage

$.localStorage('key', 'string value')
> true

$.localStorage('key')
> "string value"

$.localStorage('json', {'a': 'b', 'c': 'd'})
> true

$.localStorage('json')['a']
> "b"

$.localStorage('json', {'a': 'b', 'c': 'd', 'e': {'f': 'g'}})
> true

$.localStorage('json')['e']['f']
> "g"

It already includes a JSON reader and stringifier:

JSON.stringify = JSON.stringify || function (obj) {
  var t = typeof (obj);
  if (t != "object" || obj === null) {
    if (t == "string") obj = '"' + obj + '"';
    return String(obj);
  } else {
    var n, v, json = [], arr = (obj && obj.constructor == Array);

    for (n in obj) {
      v = obj[n]; t = typeof(v);

      if (t == "string") v = '"'+v+'"';
      else if (t == "object" && v !== null) v = JSON.stringify(v);

      json.push((arr ? "" : '"' + n + '":') + String(v));
    }

    return (arr ? "[" : "{") + String(json) + (arr ? "]" : "}");
  }
};

JSON.parse = JSON.parse || function (str) {
  if (str === "") str = '""';
  eval("var p=" + str + ";");
  return p;
};

If you want, you can just grab whatever you need here: https://github.com/joshualat/jquery-local-storage/blob/master/jquery.local-storage.js

Stringify

Check browser

Set Local Storage Item with String

answered Apr 11, 2015 at 11:34

Joshua Arvin Lat

1,0399 silver badges8 bronze badges

1 Comment

Joshua Arvin Lat Over a year ago

It depends if you're already using a jQuery in your project. If you're planning to do everything in pure JavaScript, then the JavaScript approach should be okay. :)

Collectives™ on Stack Overflow

Storing JSON array in HTML5 storage not working

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related