javascript - 为什么不是从“LocalStorage”中的数据数组创建表？

Question

我想从localStorage. 为此，实现了添加方法：addToBook (). removeContact (e)并删除我将数据发送到的方法localStorage。

但我得到两个错误：

• 第一的：Uncaught TypeError: Can not set property 'innerHTML' of indefinite
• 添加联系人时的第二个：Uncaught ReferenceError: LocalStorage is not defined

我需要将数据正确添加/删除到数组和localStorage. 另外，这些数据将在表中创建或删除，这是我在方法中尝试做的：drowTable (). 请帮忙解决这个问题

class Contacts {
    constructor() {
        // Storage Array
        this.contacts = [];
    }

    addToBook() {
        let isNull = forms.name.value != '' && forms.phone.value != '' && 
forms.email.value != '';
        if (isNull) {
            // format the input into a valid JSON structure
            let obj = new LocalStorage(forms.name.value, forms.phone.value, 
forms.email.value);
            this.contacts.push(obj);
            localStorage["addbook"] = JSON.stringify(this.contacts);
            table.show();
        }
        console.log(this.contacts);
    }

    removeContact(e) {
        // Remove an entry from the addressbook
        if (e.target.classList.contains('delete')) {
            let remID = e.target.getAttribute('data-id');
            this.contacts.splice(remID, 1);
            localStorage['addbook'] = JSON.stringify(this.contacts);
            table.show();
        }
    }
}
let data = new Contacts();
class Forms {
    constructor() {
        // Blocks
        this.BookDiv = document.querySelector('.addbook');
        // Forms
        this.fields = document.forms[0].elements;
        this.name = this.fields[0].value;
        this.phone = this.fields[1].value;
        this.email = this.fields[2].value;
        // Buttons
        this.addBtn = document.getElementById("Add");
        this.addBtn.addEventListener("click", data.addToBook.bind(data));
        this.BookDiv.addEventListener("click", data.removeContact.bind(data))

    }
}
class ShowAddressBook {
    constructor() {
    };

    drowTable() {
        if (localStorage['addbook'] === undefined) {
            localStorage['addbook'] = '';
        } else {
            data.contacts = JSON.parse(localStorage['addbook']);
            // Loop over the array addressBook and insert into the page
            data.BookDiv.innerHTML = '';
            const rows = document.querySelectorAll("#book .data");
            for (let i = rows.length - 1; i >= 0; i--) {
                const e = rows.item(i);
                e.parentNode.removeChild(e);
            }
            const table = document.getElementById("shop");

            for (let i = 0; i < data.contacts.length; i++) {
                //create table
                table.innerHTML += `<tbody><tr class="data">
                    <td class="checkBox"><input type="checkbox"></td>
                    <td>${data.contacts[i].name}</td>
                    <td>${data.contacts[i].phone}</td>
                    <td>${data.contacts[i].email}</td>
                    <td ><i class="far fa-trash-alt delete" data-id="' + i + '"></i></td>
                </tr></tbody>`;
            }

        }
        this.drowTable();
        console.log(data.contacts);
    }
}
let table = new ShowAddressBook();
let forms = new Forms();
table.drowTable();

class LocalStorage {
    constructor(name, phone, email) {
        this.name = name;
        this.phone = phone;
        this.email = email;
    }
}

    <div class="AddNewContact">
        <i class="fas fa-search "></i>
    </div>
    <div class="addNewContact-form">
        <form name="register">
        <label for="name">Name</label><input type="text" id="name" class="formFields">
        <label for="phone">Phone</label><input type="text" id="phone" class="formFields">
        <label for="email">E-Mail</label><input type="text" id="email" class="formFields">
        <br><br>
        <button id="Add" type="button">Add Now</button><button id="Cancel" type="button">Cancel</button>
        </form>
    </div>
    <div class="addbook">
             <table id="book">
                 <thead>
                 <tr>
                     <th class="check"></th>
                     <th class="name">Name: <i class="fas fa-arrows-alt-v"></i></th>
                     <th class="phone">Phone: <i class="fas fa-arrows-alt-v"></i></th>
                     <th class="email">E-mail: <i class="fas fa-arrows-alt-v"></i></th>
                     <th class="del"></th>
                 </tr>
                 </thead>
             </table>
    </div>

标签： javascriptoopdomecmascript-6local-storage