html5 localStorage confusion

I am trying to figure out how to store dynamically created list elements in local storage with the key/value pair system, but cannot figure it out...

I have a list of bars which can be added to a 'favorites' list by click a star on the individual bar's page and having the particular list element cloned and then appended to the favorites list.

I can't figure out how to store this information using local storage...

This is the JS using Jquery toggling a class, swapping an image and then cloning and appending to the #favorites ul

$("document").ready(function() {

$('#club1668Star').toggle(club1668Blue, club1668White)

function club1668Blue(evt) {
    $('#club1668Star').toggleClass('club1668Blue').attr("src", "media/images/bluestar40.png");
    $("#barlist li[id=club1668List]").toggleClass('club1668Fav');
    $("#barlist li[class=club1668Fav]").clone().appendTo("#favourites ul[class=plasticBar]");

}

function club1668White(evt) {
    $('#club1668Star.club1668Blue').removeClass('club1668Blue').attr("src", "media/images/whitestar40.png")
    $("#barlist li[class=club1668Fav]").toggleClass('club1668Fav');
    $("#fav开发者_Python百科ourites ul[class=plasticBar] li[id=club1668List]").remove();
}

});

any help would be greatly appreciated...

cheers, mark

There's a well-known way to pass multiple JS objects as a single value, it is called JSON. Can't it suit you?

You can group multiple attributes together into objects, then store the objects in localStorage. By default, the localStorage key/value pairs stores the values as strings, however you can wrap this with something that converts between strings and objects - there are some examples on how to do this at Storing Objects in HTML5 localStorage