localStorage getItem 问题

Question

我的页面上有多个输入，并通过单击按钮将来自它们的数据存储在 ... 中（由于文本是输入和存储的，因此被认为不会从那些中消失跨度 > 字段）。

        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

localStorage getItem 问题

localStorage getItem issue

javascript

html

local-storage