how to store more then one data in localstorage

Question

what i need

• i need to store more then data in array , such user click on div respective data must be stored in array.

like

id: 1223, city:'chicago',

id:12333,city:' new york';

code

      function favaorite(sess_id,name,city,country,event_url,pointer)
        {



        /* store imageurl in localstorage */
        var  imageUrl='/images/star1_phonehover.png';


        // Save data to the current local store//

        // Put the object into storage
        localStorage.setItem('id' ,JSON.stringify(sess_id));

        // Put the object into storage
        localStorage.setItem('name' ,JSON.stringify(name));

        // Put the object into storage
        localStorage.setItem('city',JSON.stringify(city));

        // Put the object into storage
        localStorage.setItem('country',JSON.stringify(country));

        // Put the object into storage
        localStorage.setItem('event_url',JSON.stringify(event_url));


        // Put the object into storage
        localStorage.setItem('imageUrl',JSON.stringify(imageUrl));

step 2.

     /* fetch the data using from localstorage */
        var id= [];
        var name= [];
        var city = [];
        var country =[];
        var event_url= [];

        // Retrieve the object from storage
        //var id, city, country,event_url;


        var id = localStorage.getItem('id');
        console.log(id);
        id = JSON.parse(id);
        var name = localStorage.getItem('name');
        name = JSON.parse(name);
        console.log(name);

        var name = localStorage.getItem('name');
        name = JSON.parse(name);

        var city = localStorage.getItem('city');
        city = JSON.parse(city);
        console.log(city);

        var country = localStorage.getItem('country');
        country = JSON.parse(country);
        console.log(country);

        var event_url = localStorage.getItem('event_url');
        event_url = JSON.parse(event_url);
        ///console.log(event_url);

        var image_url = localStorage.getItem('imageUrl');
        //event_url = JSON.parse(event_url);
        alert(image_url);
        console.log(image_url);

here is snapshot :

• i need to store more then string in array.
• i have tried by console.log(id.length)//undefined.

• i have also looked loop to store more values in localstoarge.

  for (var i = 0; i < localStorage.length; i++) {
   console.log(localStorage.key(i))
     };
  

Answer 1

Try like this,

U have to create an object and fill the details on every click, push that object into an array and store that array in local storage by using JSON.stringify().

And while retrieving again parse that JSON using JSON.parse().

    function favaorite(sess_id,name,city,country,event_url,pointer){
       var eventData = JSON.parse(localStorage.getItem('eventData '));
       if(eventData ==null){
           eventData=[];
       }

       Var details={};

       details["sess_id"]=sess_id;
       details["name"]=name;
       details["city"]=city;
       details["country"]=country;
       details["event_url"]=event_url;
       details["pointer"]=pointer;

      eventData.push(details);

      localStorage.setItem('eventData', JSON.stringify(eventData));
    }

While retrieving parse the string to json u'll get the array of those click event details.

var EventDetails=JSON.parse(localStorage.getItem('eventData '));

Answer 2

You can stringify entire object and save everything at once:

localStorage.setItem('event', JSON.stringify({
    id: sess_id,
    name: name,
    city: city,
    country: country,
    event_url: event_url,
    imageUrl: imageUrl
}));

It will also make the code simpler and shorter:

function favaorite(sess_id, name, city, country, event_url, pointer) {

    /* store imageurl in localstorage */
    var imageUrl = '/images/star1_phonehover.png';

    // Save data to the current local store//
    if (typeof (localStorage) == 'undefined') {
        console.log('Your browser does not support HTML5 localStorage. Try upgrading.');
    } else {
        try {
            // Put the object into storage
            localStorage.setItem('event', JSON.stringify({
                id: sess_id,
                name: name,
                city: city,
                country: country,
                event_url: event_url,
                imageUrl: imageUrl
            }));
        } catch (e) {
            if (e == QUOTA_EXCEEDED_ERR) {
                console.log('Quota exceeded!'); //data wasn't successfully saved due to quota exceed so throw an error
            }
        }
    }
}

And retrieving saved event data you can simply do reverse:

var eventData = JSON.parse(localStorage.getItem('event'));