localStorage getItem issue

Question

I have multiple inputs on my page and store the data from them inside < span > ... < /span > by button click (since the text is typed and stored, it is considered not to disappear from those < span > fields).

        var newDate = document.getElementById('event_date');//my input
        var storageNewDate = newDate.value;//my text inside <input> which transfers it to <span>
        localStorage.setItem('Date', storageNewDate);//the data is stored

But I can't retrieve the stored data from localStorage. My Web Developer Tools show me that stored Data exists, but when I turn or reload the page I get my < span > fields empty.

    var insideSpanTags = document.getElementsByClassName("spanEvent");//all my <spans> 
      insideSpanTags.innerHTML = localStorage.getItem('Date');// I want my stored data to be shown there   

So, how can I get my stored data inside < span > tags every time I refresh or reload the page?

Answer 1

You need to loop your selectors

var insideSpanTags = document.getElementsByClassName("spanEvent");

for(var i=0; i<insideSpanTags.length; i++){
      insideSpanTags[i].innerHTML = localStorage.getItem('Date');
}

cause insideSpanTags is an Array collection of all your elements.

---

Since you're using an Array of objects, you need to JSON.stringify your Array of objects into localStorage. Than to retrieve the values use JSON.parse:

jsBin demo

var insideSpanTags = document.getElementsByClassName("spanEvent");
var events = [
    {
        'date': '7-1-2015',
        'event': 'Event Title',
        'participants': 'John, Robert',
        'description': 'Football'        
    },
    {
        'date': '23-1-2015',
        'event': 'Event Title 2',
        'participants': 'Peter, Rob',
        'description': 'Basketball'        
    },
];


// On Save, use this to store your events:
localStorage.evts = JSON.stringify( events );
// Now events are stored in LS


// After it's saved but also while first reading use:
var storedEvts = JSON.parse( localStorage.evts );
console.log( storedEvts );


// Just to test
storedEvts.forEach(function(el, idx){
  insideSpanTags[idx].innerHTML = el.date;
});

// Result:
//> 7-1-2015
//> 23-1-2015