localStorage不会列出所有项目-当我只有一个时会列出多个对象吗？

编程问答 2022-06-09

问题描述

我需要帮助弄清楚为什么我的localStorage做一些事情（或不做一些事情）

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

  2. 第二个对象是正确的，但它只显示详细信息-而不是时间和详细信息-不管我进行什么调整？

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

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

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

// 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'));


});

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

bootcampjavascriptjquery