Javascript 将用户输入推送到本地存储阵列

我试图找到一个函数，它可以通过用户输入将“Employee”技能推入本地存储，然后输出一个包含数据的表或更新现有表。我有一张工作台。有人知道从这里走到哪里吗？：）

我也充分意识到本地存储并不是最好的选择。。但这是一个学校项目，我们还没有与数据库合作

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

是一个类，

addNewSkill

是这个类的一个方法，这样在存储数据时信息就会丢失

第二个问题是，您没有员工的唯一ID。那么，如何知道您是否为给定员工添加了

技能

，如何将该技能准确地更新到该员工？可能有更好的方法，我使用了从存储的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>

班级员工{
建造师（姓名、性别、部门、电子邮件、技能）{
this.name=名称；
这个。性别=性别；
这个部门=部门；
this.email=电子邮件；
这是：技能=[]；
}
addNewSkill（jsonOrderedIndex，技能）{
这个。技巧。推（技巧）；
这是一个持久化的EmployeeDataToLocalStorage（JSONOrderIndex）；
}
persistEmployeeDataToLocalStorage（JSONOrderIndex）{
让employeeListArray=JSON.parse（localStorage.getItem（“Employee”）；
employeeListArray[JSONOrderIndex]=此；
var employeeListString=JSON.stringify（employeeListArray）；
setItem（“Employee”，employeeListString）；
log（employeeListArray、JSONOrderIndex、this、localStorage.getItem（“Employee”）；
}
}
功能构建表（员工）{
让table=document.createElement（“table”）；
table.appendChild（document.createElement（“thead”）；
表.appendChild（document.createElement（“tbody”）；
employees.forEach（函数（雇员、ExEmployeeIndex）{
让row=document.createElement（“tr”）；
设dummy=新员工（Employee.name、Employee.gender、Employee.department、Employee.email、Employee.skills）；
让fields=Object.keys（虚拟）；
如果（0==exmployeeIndex）{//在迭代的第一次，在这里创建表头
设headlow=document.createElement（“tr”）；
fields.forEach（函数（字段）{
让headCell=document.createElement（“th”）；
headCell.textContent=字段；
头枕。附肢儿童（头枕）；
});
表.querySelector（“thead”）.appendChild（头下方）；
}
forEach（函数（字段、字段索引）{
让cell=document.createElement（“td”）；
cell.textContent=员工[字段]；
如果（fieldIndex==fields.length-1）{//检查字段的最后一次出现
让inputField=document.createElement（'input'）；
inputField.type=“text”；
cell.appendChild（输入字段）；
让saveSkillz=document.createElement（'button'）；
saveSkillz.innerHTML=“保存”；
cell.appendChild（saveSkillz）；
saveSkillz.addEventListener(
“点击”，
函数（）{
dummy.addNewSkill(
ExEmployeeIndex，//这是从ExEmployees.forEach…index定义的索引
此.closest（'td'）.querySelector（'input'）.value
)
}
);
}
子行（单元格）；
});
表.querySelector（“tbody”）.appendChild（行）；
});
返回表；
}
//员工数据库“本地存储”
if（localStorage.getItem（“Employee”）==null）{
var employeeList=[]；
employeeList.push（新员工（“西蒙”、“男性”、“人力资源”），1999年SM1@cbs.dk"));
employeeList.push（新员工（“Mads”、“男性”、“IT”），1999年MS@cbs.dk"));
employeeList.push（新员工（“杰西卡”，“女性”，“销售”，1998，”JT@cbs.dk"));
employeeList.push（新员工（“本杰明”，“男性”，“IT”，1997，”BN@cbs.dk"));
var employeeListString=JSON.stringify（employeeList）；
setItem（“Employee”，employeeListString）；
document.querySelector（“#employees”）.appendChild（buildTable（employeeList））；
}否则{
var employeeList=JSON.parse（localStorage.getItem（“Employee”）；
}
document.querySelector（“#employees”）.appendChild（buildTable（employeeList））；

您无法从javascript连接到db。@MariosNikolaou LocalStorage在您的浏览器中就像一个临时数据库（但不完全是一个数据库）。你可以在服务器端运行时环境（如NodeJS）的帮助下使用JS连接到数据库。我们根本不使用数据库，我只是想知道如何将数据从a推送到本地存储，然后让它在提交时更新我的表：）

window.localStorage.setItem（key，vlaue）

将数据存储在本地存储中，看看这个。

<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>