javascript - 获取 JSON 数据

Question

我有一本日历。它的每个单元格(=天)包含

    <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")')
        }
      ]; 

Answer 1

我相信您对如何访问和修改 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() 更快)。

希望对你有帮助!