Local storage is great for storing data that you want to persist across browser sessions. The way local storage works is by storing data in key and value pairs. To retrieve the data, just pass in the same key associated with what you stored earlier. If all this is news to you, take a few moments and check out my HTML5 Local Storage tutorial first. The rest of what I am about to say makes more sense if you know the basics of how local storage works.

With all of that said, if there is one thing about local storage that I dislike, it is that it stores all of your data as strings. Now, I have nothing against strings:

Some of my best friends are strings. It is just that, sometimes, they are not really the best format for storing complex pieces of data. If what I am storing is simple text values, then strings are great. If I want to store something a bit more complex like an array, strings lose their usefulness very quickly. No strings means no local storage. There is a solution, though.

In this tutorial, I will show you a very easy way of storing an array as a string in local storage. Not only will you learn how to store your stringified array, you will also learn how to retrieve it and convert it back into a normal array so that so that you can do all sorts of array-like things do it.

Let's get started.

Storing Your Array as a String

In order to use local storage with our array, we'll need to convert our array into a string using a method that makes it easy for us to unconvert later. The way convert an array into a string is by using the JSON stringify function.

Let's say you have the following array called movies:

var movies = ["Reservoir Dogs", "Pulp Fiction", "Jackie Brown", 
			  "Kill Bill", "Death Proof", "Inglourious Basterds"];

Using the stringify function, your movies array can be turned into a string by using the following syntax:

JSON.stringify(movies)

Since we want to store everything into our local storage, when you put it all together, you get the following:

var movies = ["Reservoir Dogs", "Pulp Fiction", "Jackie Brown", 
			  "Kill Bill", "Death Proof", "Inglourious Basterds"];

localStorage.setItem("quentinTarantino", JSON.stringify(movies));

Notice that my data is being stored under the key called quentinTarantino.

Retrieving Your Data

Storing your data is only part of the fun. A very important part of all this is being able to retrieve your data and get back to using it like an array. This involves first retrieving your data as a string:

var retrievedData = localStorage.getItem("quentinTarantino");

My retrievedData variable is storing the values returned by my local storage item whose key is quentinTarantino. This data is currently in the form of a string.

To convert from a string back to an object, use the JSON parse function:

var movies2 = JSON.parse(retrievedData);

Once you have done this, the movies2 variable will point to the parsed data which is, as you can guess, an array. You can call all of the array methods on your movies2 Array object just like you always would for any old array.

Conclusion

Well, that's all there is to it. As you can see, the JSON functions for working with strings makes converting and restoring complex objects like Arrays really easy. The technique I've shown here applies equally to other, non-Array objects as well. Try it out sometime - it works!

If you have been following along and want to see what my full code looks like, you can find it below:

// our array
var movies = ["Reservoir Dogs", "Pulp Fiction", "Jackie Brown", 
"Kill Bill", "Death Proof", "Inglourious Basterds"];

// storing our array as a string
localStorage.setItem("quentinTarantino", JSON.stringify(movies));

// retrieving our data and converting it back into an array
var retrievedData = localStorage.getItem("quentinTarantino");
var movies2 = JSON.parse(retrievedData);

//making sure it still is an array
alert(movies2.length);

Notice at the very end I call the length property on the movies2 variable just to ensure that what we have is indeed an array.

Just a final word before we wrap up. If you have a question and/or want to be part of a friendly, collaborative community of over 220k other developers like yourself, post on the forums for a quick response!