Javascript localStorage并没有列出所有的项目，而是列出了多个对象，而我只有一个？

我需要帮助了解为什么我的localStorage正在做一些事情（或不做一些事情）

当我记录控制台日志时，它显示了两个本地存储对象数组，其中一个只显示“[object HTMLCollection]”

第二个对象是正确的，但它只显示了事件的细节——而不是时间和细节——不管我如何调整它

颜色（过去、现在和未来的事件）偶尔会起作用，但我无法找出正确的方法来确保每次都能抓住正确的div

最后，我在输入数据时有脚本，它会保存，但在刷新时，本地存储不会保存输入文本（或者至少不会将文本打印回浏览器）

这是分配给我的一个工作日计划项目。我的想法是在日程表中输入不同的约会，然后根据一天中的时间，日历的各个部分将是棕色、绿色或红色，以表示过去、现在和未来。对这些问题的任何输入都非常有用

// moment.js variable for the moment
let m = moment();
// current time/hour
let currentTime = m.format('h:mma');

// empty array for the schedule blocks
let tempStorage = [];
let apptText = '';
let apptTime = '';


var storedAppointments;
var returnedAppointments;

// display the time at the top of the schedule - time and date
let date = m.format("dddd MMM Do");

$(document).ready(function () {
    $('#currentDay').html(`${date}`);
    $('#currentTime').html(`${currentTime}`);

    // console.log(localStorage);

    function viewSchedule() {

        storedAppointments = JSON.parse(localStorage.getItem('scheduleBlocks'));

        if (storedAppointments !== null) {
            for (i = 0; i < storedAppointments.length; i++) {
                returnedAppointments = storedAppointments[i];
                details = returnedAppointments.details;
                timeIndex = returnedAppointments.time;

                if (details !== null) {
                    $("#" + timeIndex).children('div').children('div').children('textarea').val(details);
                }
            }

        }


        function changeColor() {
            for (i = 9; i <= 17; i++) {
                let scheduleTime = moment().hour();
                scheduleTime = i;

                if (currentTime === i) {
                    $('.inputText' + i).addClass('present');

                } else if (currentTime > i) {
                    $('.inputText' + i).addClass('past');

                } else {
                    $('.inputText' + i).addClass('future');

                }
            }
        }

        changeColor();
        // $(document.body).click(function () {

        //     $("div.inputText").each(function (i) {
        //         if (hour === currentTime) {
        //             $(this).addClass('present').removeClass('future').removeClass('past');
        //         } else if (hour > currentTime) {
        //             $(this).addClass('past');
        //         } else {
        //             $(this).addClass('future').removeClass('past').removeClass('present');

        //         }
        //     });
        // });

    }
    viewSchedule();
});


// add a class for past, present and future events/appointments for the day
let time = document.getElementsByClassName('display-time');
let data = document.getElementsByClassName('inputText');

// localStorage.setItem("scheduleBlocks " + time, data);
$('.saveBtn').click(function () {
    apptText = $(this).parent('div').children('div').children('textarea').val();
    apptTime = $(this).parent('div').parent().attr('id');
    let appointment = {
        time: apptTime,
        details: apptText
    };

    tempStorage = JSON.parse(localStorage.getItem('scheduleBlocks'));
    localStorage.setItem('scheduleBlocks', JSON.stringify([{
        time: apptTime,
        details: apptText
    }]));
    if (tempStorage === null) {
        localStorage.setItem('scheduleBlocks', JSON.stringify([{
            time: apptTime,
            details: apptText
        }]));
    } else {
        tempStorage.push(appointment);
        localStorage.setItem('scheduleBlocks', JSON.stringify(tempStorage));
    }
    $(this).parent('div').children('div').children('textarea').replaceWith($('<textarea>' + apptText + '</textarea>').addClass('textAreaInput'));


});

//当前的moment.js变量
设m=力矩（）；
//当前时间/小时
设currentTime=m.format（'h:mma'）；
//明细表块的空数组
设tempStorage=[]；
设apptText=''；
让apptTime=''；
var存储点；
var返回的药膏；
//在计划顶部显示时间-时间和日期
let date=m.format（“dddd MMM Do”）；
$（文档）.ready（函数（）{
$（'#currentDay'）.html（`date}`）；
$（'#currentTime'）.html（'${currentTime}'）；
//log（本地存储）；
函数viewSchedule（）{
storedappoints=JSON.parse（localStorage.getItem（'scheduleBlocks'）；
if（storedappoints！==null）{
对于（i=0；i当前时间）{
//$（this.addClass（'pass'）；
//}其他{
//$（this）.addClass（'future'）.removeClass（'pass'）.removeClass（'present'）；
//         }
//     });
// });
}
viewSchedule（）；
});
//为当天的过去、现在和未来事件/约会添加一个类
let time=document.getElementsByClassName（'display-time'）；
让数据=document.getElementsByClassName（'inputText'）；
//setItem（“scheduleBlocks”+时间，数据）；
$（'.saveBtn'）。单击（函数（）{
apptText=$（this）.parent（'div'）.children（'div'）.children（'textarea'）.val（）；
apptTime=$（this.parent（'div'）.parent（）.attr（'id'）；
让预约={
时间：apptTime，
详情：apptText
};
tempStorage=JSON.parse（localStorage.getItem（'scheduleBlocks'）；
setItem（'scheduleBlocks'，JSON.stringify([{
时间：apptTime，
详情：apptText
}]));
if（tempStorage==null）{
setItem（'scheduleBlocks'，JSON.stringify([{
时间：apptTime，
详情：apptText
}]));
}否则{
临时存储。推送（预约）；
setItem（'scheduleBlocks'，JSON.stringify（tempStorage））；
}
$（this）.parent（'div'）.children（'div'）.children（'textarea'）.replacetwith（$（''+apptText+''）.addClass（'textAreaInput'））；
});

在save方法中，您连续三次写入

localStorage.setItem（'scheduleBlocks'），

。