javascript - localStorage getItem 问题

Question

这个问题已经有答案了:

What do querySelectorAll and getElementsBy* methods return? (12 个回答)

已关闭 8 年前。

我的页面上有多个输入，并通过单击按钮将它们的数据存储在 ... 中(由于文本是键入并存储的，因此认为不会从这些 中消失)字段)。

        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