Trying to store a URL as JSON

Question

I'm trying to store some details about a number of sites using HTML5 local storage, and I've run into a bit of a wall.

Basically, I want the application to be able to cache data offline, and the way I've been developing it, every time the main page loads, the content is cached as localStorage.sitedata. I'm storing it as JSON.

The code I've written for it looks like this:

            // Retrieve response as JSON
            response = $.parseJSON(data);

            // Store the data in HTML5 local storage as well
            var dataToCacheArray = new Array();
            for(var item in response){
                var obj = response[item];
                dataToCacheArray.push(obj);
            }
            var dataToCache = JSON.stringify(dataToCacheArray);
            localStorage.sitedata = dataToCache;

Now, the data in dataToCacheArray is exactly what I want - it's an array containing a number of JavaScript objects. Here's one of them, as shown in Chrome's developer tools if I use console.log() to view dataToCacheArray:

lastChecked: "13:46:55 Wednesday 15 August 2012"
siteId: "34"
status: "1"
success: "1"
url: "http://localhost"

Afterwards, I store a stringified version of dataToCacheArray as dataToCache, and if I view that with console.log(), I get this:

[{"status":"1","success":"1","siteId":"34","lastChecked":"13:46:55 Wednesday 15 August 2012"}]

As you can see, for some reason the URL is not included in the stringified version. Any idea as to where I might have gone awry?

Answer 1

Set the URL to encodeURIComponent(url) so that it is properly escaped in the original data before serializing to JSON.