how to store and fetch data from array using localStorage in javascript

Question

What i need

• i need to store all data in array.

• and then fetch data .

  refrence link
  

  1. How do I store an array in localStorage?.

  2. http://blog.teamtreehouse.com/storing-data-on-the-client-with-localstorage

js code

   <script>

 function favorite(sess_id,city,country,event_url)
{



 // Save data to the current local store//
    if (typeof(localStorage) == 'undefined' ) {
alert('Your browser does not support HTML5 localStorage. Try    upgrading.');
      }

      else
     {
      try {

      localStorage.setItem('id' ,sess_id);
      }
      catch (e)
      {
           if (e == QUOTA_EXCEEDED_ERR)
           {
               alert('Quota exceeded!'); //data wasn't successfully saved due to quota exceed so throw an error
           }
      }
      try {

      localStorage.setItem('city',city);
      }
      catch (e)
      {
           if (e == QUOTA_EXCEEDED_ERR)
           {
               alert('Quota exceeded!'); //data wasn't successfully saved due to quota exceed so throw an error
           }
      }
      try {

      localStorage.setItem('country',country);
      }
      catch (e)
      {
           if (e == QUOTA_EXCEEDED_ERR)
           {
               alert('Quota exceeded!'); //data wasn't successfully saved due to quota exceed so throw an error
           }
      }
      try
      {

      localStorage.setItem('event_url',event_url);
      }
      catch (e)
      {
           if (e == QUOTA_EXCEEDED_ERR)
           {
               alert('Quota exceeded!'); //data wasn't successfully saved due to quota exceed so throw an error
           }
      }

}

/* fetch the data using from localstorage */

var id= [];
var city = [];
var country =[];
var event_url= [];
// Retrieve the object from storage
      var retrievedObject = localStorage.getItem('id');
  console.log('id: ', JSON.parse(retrievedObject));
   var city = localStorage.getItem('city');
    console.log('city: ', JSON.parse(city));
    var country = localStorage.getItem('country');
    console.log('country: ', JSON.parse(country));
    var event_url = localStorage.getItem('event_url');
    console.log('event_url: ', JSON.parse(event_url));



       }

problem

• i have read an article to retrieving of keys.

code

      if (localStorage)
      {
        if (localStorage.length)
        {
            for (var i = 0; i < localStorage.length; i++)
            {
            console.log(localStorage.key(i));
            id[i] = localStorage.getItem('id');
            city[i] = localStorage.getItem('city');
            country[i] = localStorage.getItem('country');
            event_url[i] = localStorage.getItem('event_url');
            console.log(id[i]);
            console.log(city[i]);
            console.log(country[i]);
            console.log(event_url[i]);

            }
        }
        else
        {
         alert('You have no favorite names stored');
        }
      }

• i need suggestion i should use json.parse to retreive array or localstorage.length assign index of array.

Answer 1

The way you are retrieving the data from the local storage seems wrong. I don't understand, why you are iterating over the local storage length. Instead you can do this.

var id, city, country,; event_url;  

// Retrieve the object from storage
var id = localStorage.getItem('id');
    id = JSON.parse(id);
var city = localStorage.getItem('city');
    city = JSON.parse(city);
var country = localStorage.getItem('country');
    country = JSON.parse(country);
var event_url = localStorage.getItem('event_url');
    event_url = JSON.parse(event_url);

Answer 2

WHen working with arrays and localStorage the basics are fairly simple.

To store, use JSON.stringify() to convert your javascript array to JSON, then simply use one localSTorage key to set the value.

When you need to access the array, pull it from localStorage and use JSON.parse() to convert the whole string back to javascript array. Once you have pulled the data, use the array as you would any other array and then store it back to the same localStorage key when you are done manipulating it

var existingArray=[
      {id:1 , country:'Country1', url:'example.com'}, 
      {id:2 , country:'Country2', url:'example2.com'}
];

localStorage.setItem('myEventsArray', JSON.stringify( existingArray));

/* on pageLoad */
var pageLoadArray = [];
var storedString = localStorage.getItem('myEventsArray');
if( storedString  ){
    pageLoadArray = JSON.parse(storedString);
    if( pageLoadArray.length){
       alert( pageLoadArray[0].country)
    }
}