从本地存储中检索数组中对象的值

时间:2021-12-21 16:52:43

I have 2 webpages. One called Create An Event and the other Calendar Of Events. In Create An Event, a form is used to allow users' inputs. The inputs are then stored to local storage with the following function:

我有2个网页。一个叫做创建活动和另一个活动日历。在“创建事件”中,表单用于允许用户输入。然后使用以下功能将输入存储到本地存储:

document.addEventListener("DOMContentLoaded", docIsReady);
var CreateEvent;

function docIsReady() {
    CreateEvent = localStorage.getItem("CreateEvent");
    if (CreateEvent == null) {
        CreateEvent = [];
    } else {
        CreateEvent = JSON.parse(CreateEvent);
    }
}

function saveToStorage() {
    var one;
    var nameofevent = document.getElementById("name").value;
    var pList = document.getElementsByName("pos");
    var positions = [];
    for (i = 0; i < pList.length; i++) {
        positions.push(pList[i].value);
        console.log(pList[i].value);
    }
    //for (i=0; i<positions.length; i++){
    //console.log(positions[i].value);
    //}
    var venue = document.getElementById("venue").value;
    var date = document.getElementById("date").value;
    var starttime = document.getElementById("timeStart").value;
    var endtime = document.getElementById("timeEnd").value;
    var contact = document.getElementById("contact").value;
    var email = document.getElementById("email").value;
    var desc = document.getElementById("desc").value;
    one = {
        "name": nameofevent,
        "pos": positions,
        "venue": venue,
        "date": date,
        "timeStart": starttime,
        "timeEnd": endtime,
        "contact": contact,
        "email": email,
        "desc": desc
    };
    CreateEvent.push(one);
    localStorage.setItem("CreateEvent", JSON.stringify(CreateEvent));
    return false;
}

I made CreateEvent an array so as to store the multiple inputs because there cannot be only one event created. Now, I need to display the NAME of the event in a table on Calendar Of Events. As its a calendar, the events will be sorted by the months. However, I don't know how to access the "date" and "name" value in each of the objects stored in the array. How do I retrieve the values in objects?

我使CreateEvent成为一个数组,以便存储多个输入,因为不能只创建一个事件。现在,我需要在Calendar Of Events的表格中显示事件的NAME。作为日历,事件将按月分类。但是,我不知道如何访问存储在数组中的每个对象中的“日期”和“名称”值。如何检索对象中的值?

1 个解决方案

#1


0  

You index into the array using []:

使用[]索引数组:

var entry = CreateEvent[0]; // 0 = the first entry

...and then use the properties on that object:

...然后使用该对象上的属性:

console.log(entry.name);

Side note: You're free to do whatever you like in your own code, but FWIW, CreateEvent is an unusual name for this array for two reasons: 1. It starts with a capital letter, whereas in JavaScript the overwhelming convention is for data variables to start with a lower case letter. 2. It's a verb phrase ("create event"), but its value is a noun (an array of events). Typically lists and arrays are named with the name of what they contain, either in the plural or with a suffix like list or array. So in this case, events or eventList or eventArray would be more standard.

旁注:您可以在自己的代码中*地执行任何操作,但FWIW,CreateEvent是此数组的一个不寻常的名称,原因有两个:1。它以大写字母开头,而在JavaScript中,压倒性的约定是数据变量以小写字母开头。 2.它是动词短语(“创建事件”),但它的值是名词(事件数组)。通常,列表和数组使用它们包含的名称命名,可以是复数形式,也可以是带有后缀的列表或数组。所以在这种情况下,events或eventList或eventArray会更标准。

#1


0  

You index into the array using []:

使用[]索引数组:

var entry = CreateEvent[0]; // 0 = the first entry

...and then use the properties on that object:

...然后使用该对象上的属性:

console.log(entry.name);

Side note: You're free to do whatever you like in your own code, but FWIW, CreateEvent is an unusual name for this array for two reasons: 1. It starts with a capital letter, whereas in JavaScript the overwhelming convention is for data variables to start with a lower case letter. 2. It's a verb phrase ("create event"), but its value is a noun (an array of events). Typically lists and arrays are named with the name of what they contain, either in the plural or with a suffix like list or array. So in this case, events or eventList or eventArray would be more standard.

旁注:您可以在自己的代码中*地执行任何操作,但FWIW,CreateEvent是此数组的一个不寻常的名称,原因有两个:1。它以大写字母开头,而在JavaScript中,压倒性的约定是数据变量以小写字母开头。 2.它是动词短语(“创建事件”),但它的值是名词(事件数组)。通常,列表和数组使用它们包含的名称命名,可以是复数形式,也可以是带有后缀的列表或数组。所以在这种情况下,events或eventList或eventArray会更标准。