Reader Level:
Articles

Saving and Retrieving JavaScript Object in HTML 5 Local Storage

By Dhananjay Kumar on June 17, 2012
In this article I am going to explain how to save and retrieve JavaScript objects in HTML 5 local storage.
  • 0
  • 0
  • 13119

Recently while working I had a requierment to save a JavaScript array in local storage of HTML 5. Let us say the array is as the follwing that we want to save in local storage:

var movieArray = [
{ title: "The Artist", picture: "images/TheArtist.jpg" },
{ title: "A Better Life", picture: "images/abetterlife.jpg" },
{ title: "Abduction", picture: "images/abduction.jpg" },
{ title: "African Cats", picture: "images/africancats.jpg" },
{ title: "Angel Crest", picture: "images/angelscrest.jpg" },
{ title: "Arthur", picture: "images/arthur.jpg" },
{ title: "Anonymous", picture: "images/anonymous.jpg" },
{ title: "A Dangerous Method", picture: "images/adangerousmethod.jpg" },

];

Before saving, iterate through the array and display in the console. We can display on the console as in the follwing:

p1.png

To see the console, log in to the Chrome browser, press F12 and select the console tab.

p2.png

Everything is fine as of now and we can go ahead and save the data in local storage as in the follwing:

p3.png

As of now we have saved the data and fetched as well. Let us try to display the fetched data:

p4.png

In output windows you will be getting some expected data as in the following:

p5.png

On matching you will find that the type of the original array was object whereas the type of the reterived data is string. This is where the problem lies; that HTML5 stores data as a string. So before saving data you need to stringify the array object and after reteriving the data you need to parse the string as a JSON object. Saving and reteriving will be modified as in the followling:

p6.png

Now if you print the reterived result you should be getting the expected output. The full code to save and reterive is as follows:
 

var movieArray = [

{ title: "The Artist", picture: "images/TheArtist.jpg" },

{ title: "A Better Life", picture: "images/abetterlife.jpg" },

{ title: "Abduction", picture: "images/abduction.jpg" },

{ title: "African Cats", picture: "images/africancats.jpg" },

{ title: "Angel Crest", picture: "images/angelscrest.jpg" },

{ title: "Arthur", picture: "images/arthur.jpg" },

{ title: "Anonymous", picture: "images/anonymous.jpg" },

{ title: "A Dangerous Method", picture: "images/adangerousmethod.jpg" },

];

        console.log('typeof movieArray: ' + typeof movieArray);

        console.log('movieArray:');

        for (var p in movieArray) {

            console.log(p+':'+movieArray[p].title+'|'+movieArray[p].picture);

        }

 

        localStorage.setItem('movieArray', JSON.stringify(movieArray));

        var retrievedMovieArray = JSON.parse(localStorage.getItem('movieArray'));

 

      console.log('typeof retrievedMovieArray: ' + typeof retrievedMovieArray);

      console.log('retrievedMovieArray:');

      for (var p in retrievedMovieArray) {

          console.log(p +':'+ retrievedMovieArray[p].title +'|'+retrievedMovieArray[p].picture);

      }

    });

 

In this way we can save and reterive JavaScript objects in the local storage of HTML5. I hope this article is useful. Thanks for reading.

Article Extensions
Contents added by r m on Sep 20, 2012
we
COMMENT USING

Trending up