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. It will automatically stringify/parse your JSON to and from localstorage. — KJ Price
– KJ Price, Commented Mar 18, 2015 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
– Rudra, Commented Mar 18, 2015 at 13:57

charlietfl · Accepted Answer · 2015-03-18 13:54:22Z

1

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

edited Mar 18, 2015 at 13:54

answered Mar 18, 2015 at 13:47

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

afeef Over a year ago

i wants to store more than one event in array but when check localstorage it shws recent clicked data in localstoarge

afeef Over a year ago

i checked by id[]; var id = localStorage.getItem('id'); console.log(id); id = JSON.parse(id); console.log(id.length); //undefined

Rudra · Accepted Answer · 2015-03-18 14:08:12Z

0

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

answered Mar 18, 2015 at 14:08

Rudra

1,68816 silver badges30 bronze badges

1 Comment

charlietfl Over a year ago

most likely because OP wants to store more than one event

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related