localStorage getItem問題

Question

我在我的頁面上有多個輸入，並將它們的數據存儲在< span> ... </span>中（由於文本是鍵入並存儲的，因此不會從這些文本中消失） < span>字段）。

 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 

但我無法從localStorage檢索存儲的數據。我的Web開發工具告訴我存儲的數據存在，但是當我打開或重新加載頁面時，我的空間字段爲空。

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

所以，我怎麼能進去<跨度我每次刷新或重新加載頁面時我的存儲數據>標籤？

Answer 1

您需要循環您選擇

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

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

原因insideSpanTags的所有元素的數組集合。

---

由於您使用對象的數組，你需要JSON.stringify你的對象數組的localStorage。比來獲取值使用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