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.

Check out [jStorage](http://www.jstorage.info/). It will automatically stringify/parse your JSON to and from localstorage. — KJ Price, Mar 18 '15 at 13:29
if you have data in array format and all the array has equal length. Follow these steps. 1)Retrieve all the data like ids, cities, etc. from local storage and parse it to get back the array. 2)Get the length of any one array and iterate over it. 3)Use the current count as the index of other arrays too. — Rudra, Mar 18 '15 at 13:57

charlietfl · Answer 1 · 2015-03-18T13:54:22.743

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)
    }
}

i wants to store more than one event in array but when check localstorage it shws recent clicked data in localstoarge — afeef, Mar 23 '15 at 06:52
i checked by id[]; var id = localStorage.getItem('id'); console.log(id); id = JSON.parse(id); console.log(id.length); //undefined — afeef, Mar 23 '15 at 06:52

score 0 · Answer 2 · answered Mar 18 '15 at 14:08

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);

most likely because OP wants to store more than one event – charlietfl Mar 18 '15 at 22:44 — charlietfl, Mar 18 '15 at 22:44

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

2 Answers2