Question

我正在尝试找出一种功能，该功能可以通过用户输入将“员工”技能推入我的localStorage，然后输出包含数据的表或更新现有表。我有一张工作台。有谁知道从这里去哪里？：）

我也完全意识到localStorage不是最佳选择。但这是针对学校项目的，我们还没有使用数据库！

class Employee {
// vi bruger en constructor funktion for at lave en opskrift på objekter af en bestemt type.
//this metoden benyttes til at referere til det tilhørende objekt
constructor(name, gender, department, yy, email) {
    this.name = name;
    this.gender = gender;
    this.department = department;
    this.email = email;
    this.skills = [];
}
addNewSkill(skill){
    this.skills.push(skill);
}}

//Employee Database "Localstorage"
if(localStorage.getItem("Employee") == null) {
    var employeeList = [];
    employeeList.push (new Employee("Simon", "Male", "HR", 1999, "SM1@cbs.dk"));
    employeeList.push (new Employee("Mads", "Male","IT", 1999,  "MS@cbs.dk"));
    employeeList.push (new Employee("Jessica", "Female", "Sales",1998, "JT@cbs.dk"));
    employeeList.push (new Employee("Benjamin", "Male","IT", 1997, "BN@cbs.dk"));

    var employeeListString = JSON.stringify(employeeList);
    localStorage.setItem("Employee", employeeListString);
    document.querySelector("#employees").appendChild(buildTable(employeeList));
} else {
    var employeeList = JSON.parse(localStorage.getItem("Employee"));
}

//Function creates table for employeeList
function buildTable(data) {
    let table = document.createElement("table");

        // Create table head and body
        table.appendChild(document.createElement("thead"));
        table.appendChild(document.createElement("tbody"));

        let fields = Object.keys(data[0]);
        let headRow = document.createElement("tr");
        fields.forEach(function (field) {
            let headCell = document.createElement("th");
            headCell.textContent = field;
            headRow.appendChild(headCell);
        });
        table.querySelector("thead").appendChild(headRow);
        data.forEach(function (object) {
            let row = document.createElement("tr");
            fields.forEach(function (field) {
                let cell = document.createElement("td");
                cell.textContent = object[field];
                if (typeof object[field] == "number") {
                    cell.style.textAlign = "left";
                }
                row.appendChild(cell);
            });
            table.querySelector("tbody").appendChild(row);
        });
        return table;

    }

document.querySelector("#employees").appendChild(buildTable(employeeList));

Answer 1

您面临的主要问题是：

将数据存储到本地存储将仅存储数据。 Employee是此类，addNewSkill是此类的一种方法，以便在存储数据时信息会丢失。

您遇到的第二个问题是，您没有该员工的唯一ID。因此，如何知道是否为给定的员工添加skill，如何将技能更新为该员工呢？可能有更好的方法，我使用了从存储的json数组中获取的索引。不是最好的解决方案，但是可以。

也许还有更好的方法将数据映射回Employee类。但是我想这应该可以帮助您从卡住的地方继续前进：

<div id="employees"></div>


<script>

    class Employee {
        constructor(name, gender, department, email, skills) {
            this.name = name;
            this.gender = gender;
            this.department = department;
            this.email = email;
            this.skills = [];
        }

        addNewSkill(jsonOrderedIndex, skill) {
            this.skills.push(skill);
            this.persistEmployeeDataToLocalStorage(jsonOrderedIndex);
        }

        persistEmployeeDataToLocalStorage(jsonOrderedIndex) {
            let employeeListArray = JSON.parse(localStorage.getItem("Employee"));
            employeeListArray[jsonOrderedIndex] = this;
            var employeeListString = JSON.stringify(employeeListArray);
            localStorage.setItem("Employee", employeeListString);
            console.log(employeeListArray, jsonOrderedIndex, this,localStorage.getItem("Employee"));
        }
    }

    function buildTable(employees) {
        let table = document.createElement("table");
        table.appendChild(document.createElement("thead"));
        table.appendChild(document.createElement("tbody"));

        employees.forEach(function (employee, exmployeeIndex) {
            let row = document.createElement("tr");
            let dummy = new Employee(employee.name, employee.gender, employee.department, employee.email, employee.skills);
            let fields = Object.keys(dummy);
            if(0 === exmployeeIndex) { // first time in iteration, create table head here
                let headRow = document.createElement("tr");
                fields.forEach(function (field) {
                    let headCell = document.createElement("th");
                    headCell.textContent = field;
                    headRow.appendChild(headCell);
                });
                table.querySelector("thead").appendChild(headRow);
            }

            fields.forEach(function (field, fieldIndex) {
                let cell = document.createElement("td");
                cell.textContent = employee[field];

                if(fieldIndex == fields.length -1) { // check for last occurence of fields
                    let inputField = document.createElement('input');
                    inputField.type = "text";
                    cell.appendChild(inputField);

                    let saveSkillz = document.createElement('button');
                    saveSkillz.innerHTML = "save";
                    cell.appendChild(saveSkillz);

                    saveSkillz.addEventListener(
                        'click', 
                        function(){
                            dummy.addNewSkill(
                                exmployeeIndex, // this is the index defined from exmployees.forEach...index
                                this.closest('td').querySelector('input').value
                            )
                        }
                    );
                }

                row.appendChild(cell);
            });

            table.querySelector("tbody").appendChild(row);
        });
        return table;

    }


//Employee Database "Localstorage"
if(localStorage.getItem("Employee") == null) {
    var employeeList = [];
    employeeList.push (new Employee("Simon", "Male", "HR", 1999, "SM1@cbs.dk"));
    employeeList.push (new Employee("Mads", "Male","IT", 1999,  "MS@cbs.dk"));
    employeeList.push (new Employee("Jessica", "Female", "Sales",1998, "JT@cbs.dk"));
    employeeList.push (new Employee("Benjamin", "Male","IT", 1997, "BN@cbs.dk"));

    var employeeListString = JSON.stringify(employeeList);
    localStorage.setItem("Employee", employeeListString);
    document.querySelector("#employees").appendChild(buildTable(employeeList));
} else {
    var employeeList = JSON.parse(localStorage.getItem("Employee"));
}


document.querySelector("#employees").appendChild(buildTable(employeeList));

</script>

将用户输入推送到Localstorage数组

1 个答案: