我有一本日历。它的每个单元格(=天)包含
<span class="spanEvent"></span>
<span class="spanDate"></span>
<span class="spanParticipants"></span>
<span class="spanDescription"></span>
所以,我需要我之前存储的数据 (localStorage.setItem) 出现在这些
我的代码(见下文)似乎不起作用。那么,我该怎么做呢?
我创建了一个 JSON 对象并将其设为数组。数组的每个值都包含日历中某一天的数据。 “thisCell”是我的目标单元格,我单击它来检索存储的数据。
var organizer = [
//February 9, 2015
{thisCell.getElementsByClassName("spanEvent")[0].value: JSON.parse('localStorage.getItem("event")'),
thisCell.getElementsByClassName("spanDate")[0].value: JSON.parse('localStorage.getItem("date")'),
thisCell.getElementsByClassName("spanParticipants")[0].value: JSON.parse('localStorage.getItem("participants")'),
thisCell.getElementsByClassName("spanDescription")[0].value: JSON.parse('localStorage.getItem("description")')
},
//July 22, 2016
{thisCell.getElementsByClassName("spanEvent")[0].value: JSON.parse('localStorage.getItem("event")'),
thisCell.getElementsByClassName("spanDate")[0].value: JSON.parse('localStorage.getItem("date")'),
thisCell.getElementsByClassName("spanParticipants")[0].value: JSON.parse('localStorage.getItem("participants")'),
thisCell.getElementsByClassName("spanDescription")[0].value: JSON.parse('localStorage.getItem("description")')
}
];
最佳答案
我相信您对如何访问和修改 dom 元素的内容存在误解。
您的代码不会执行任何操作,因为您只是创建一个对象,而不是实际访问 dom 的元素属性,而且 <span>
元素不使用 value
属性来访问其内容,他们使用大多数 HTMLElements
do,innerHTML 属性。
此外,JSON.parse(string)
方法会将字符串转换为 JavaScript Object{}
对于您的情况,我认为这是没有必要的,因为您正在尝试将该值分配给 <span>
,它应该是一个字符串,对吗?
因此,考虑到这一点,我创建了一个 fiddle说明我认为你想做的事情。
HTML
<div class="cell">
<span class="spanEvent"></span>
<span class="spanDate"></span>
<span class="spanParticipants"></span>
<span class="spanDescription"></span>
</div>
JavaScript
localStorage.setItem("event", "someEv");
localStorage.setItem("date", "someDate");
localStorage.setItem("participants", "someParticipants");
localStorage.setItem("desc", "someDesc");
cell = document.querySelector(".cell");
spanEv = cell.querySelector(".spanEvent");
spanDate = cell.querySelector(".spanDate");
spanPart = cell.querySelector(".spanParticipants");
spanDesc = cell.querySelector(".spanDescription");
spanEv.innerHTML = localStorage.getItem("event");
spanDate.innerHTML = localStorage.getItem("date");
spanPart.innerHTML = localStorage.getItem("participants");
spanDesc.innerHTML = localStorage.getItem("desc");
注意:我使用过 querySelector()
方法来获取单元格及其元素,但请随意使用您喜欢的任何 dom 选择技术( getElementsByClassName()
更快)。
希望对你有帮助!
关于javascript - 获取 JSON 数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28394341/