HTML5 localStorage (XML/JSON data)

Question

I have an XML file as shown below:

<itemnumbers>
<item>
<itemno>123</itemno>
<desc>Desc about 123</desc>
</item>

<item>
<itemno>456</itemno>
<desc/>
</item>

...

</itemnumbers>

I would like to use the HTML5 localStorage to store the data (and retrieve for quicker access) since the XML data does not change regularly.

I am planning to convert it into JSON first and then store it in the localStorage. Should I do that in the code or have the data upfront in the .JSON file instead of the .xml file?

How do I parse the data later? Currently I am using jQuery code to parse...something like:

$(this).find("itemno").each(function()
{
$(this).text();
$(this).next().text()
}

Would the above code work after the JSON conversion?

I would like suggestions on the best way to approach this.

XML is a string, JSON is a string, `localStorage` can hold strings. Why do you want to change the data format? — zzzzBov, Nov 27 '11 at 07:17
Bcoz of the lightweight format of JSON....XML, i think, takes longer time to parse... — copenndthagen, Nov 27 '11 at 07:20
If it's in an XML file, why not just store the data in a .js (as JSON) file and be done with it? As far as parsing XML, JavaScript parses XML quite well and you'd be prematurely optimizing... — zzzzBov, Nov 27 '11 at 07:21
Well, I am open to that idea of storing directly as .json....But i wanted to know the details of how the parsing and all can be done... — copenndthagen, Nov 27 '11 at 08:53
XML and JSON are not equivocal formats. Your XML is pretty simple, so you will probably be fine, but normally you would loose some data integrity in moving from XML to JSON — austincheney, Nov 27 '11 at 08:53
Well...I agree with all the points made above...BUT my question is I have never used JSON before (only XML)....So wanted to understand HOW do I move the complete thing from XML to JSON ? — copenndthagen, Nov 27 '11 at 08:57

score 1 · Accepted Answer · edited May 23 '17 at 11:48

I agree with some of the comments that you could just continue using XML. If you want to convert to JSON, you would use a For In loop in javascript to loop through it just as you would an object in javascript.

Your data in JSON:

{"itemnumbers": 
    { "item": {"itemno": 123, "desc": "Desc about 123"} }
    { "item": {"itemno": 456, "desc": "Desc about 456"} }
}

Looping through your data where data is the JSON object above:

for (item in data.itemnumbers) {
    //do something with item data
    console.log(data.itemnumbers[item].itemno);
    console.log(data.itemnumbers[item].desc);
}

To save an object in localStorage you must transform it to a string format that you can fetch back out again as an object. You can use JSON.stringify() to make an object a string and JSON.parse() to pull it back out:

//saving object to localStorage
localStorage['my_data'] = JSON.stringify(data);

//fetching object from localStorage
data = JSON.parse(localStorage['my_data']);

Beware because these methods aren't supported on IE7 and below so you'll need to find a parsing library compatible with them. Here's a post that might help with compatibility:

Safely turning a JSON string into an object

Thx a lot for this....This solves the first half of my question....How do I save it to the HTML5 localStorage and retrieve later when it is available ? — copenndthagen, Nov 27 '11 at 12:23
You need to save the object as a string to localStorage. I'll edit the answer to include an example — Ben L, Nov 28 '11 at 16:56

score 0 · Answer 2 · answered Nov 27 '11 at 11:20

I would suggest you to write a script that converts the XML data into JSON and then send it over to the client side and save it.

Later parse the JSON when required, which is very easy to do. Just like the following :-

var jsonObject = JSON.parse(yourObjectInJSON);

Looping through it :-

for (item in jsonObject.itemnumbers) {
//do something with item data
}

HTML5 localStorage (XML/JSON data)

2 Answers2