Question

我有一个日历。每个单元格（=天）包含

    <span class="spanEvent"></span>
    <span class="spanDate"></span>
    <span class="spanParticipants"></span>
    <span class="spanDescription"></span>

所以，我需要我早先存储的数据（localStorage.setItem）出现在那些＆lt;跨度＆gt;。

我的代码（见下文）似乎不起作用。那么，我该怎么做？

我创建了一个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那样使用innerHTML属性。

此外，JSON.parse(string)方法会将字符串转换为JavaScript Object{}，在您的情况下，我认为没有必要，因为您尝试将该值分配给{{1} }，它应该是一个字符串，对吧？

所以，考虑到这一点，我创建了一个fiddle来说明我认为你想做什么。

HTML

<span>

的JavaScript

<div class="cell"> 
 <span class="spanEvent"></span>
 <span class="spanDate"></span>
 <span class="spanParticipants"></span>
 <span class="spanDescription"></span>
</div>

注意：我已经使用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");方法来获取单元格及其元素，但可以随意使用您喜欢的任何dom选择技术（querySelector()是更快）。

希望它有所帮助！

拾取JSON数据

1 个答案:

HTML

的JavaScript