Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
292 views
in Technique[技术] by (71.8m points)

javascript - 将用户输入推送到Localstorage数组(Pushing user input to Localstorage array)

i am trying to figure out a function that can push "Employee" skills into my localStorage via user input and then output a table with the data or update the existing table.(我试图找出一个功能,可以通过用户输入将“员工”技能推入我的localStorage,然后输出包含数据的表或更新现有表。)

I have a working table.(我有一张工作台。) Does anyone have an idea where to go from here?(有谁知道从这里去哪里?) :)(:)) i am also fully aware that localStorage isn't the best option.. But this is for a school project and we are not working with databases yet!(我也完全意识到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, "[email protected]")); employeeList.push (new Employee("Mads", "Male","IT", 1999, "[email protected]")); employeeList.push (new Employee("Jessica", "Female", "Sales",1998, "[email protected]")); employeeList.push (new Employee("Benjamin", "Male","IT", 1997, "[email protected]")); 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));   ask by Benjamin Nielsen translate from so

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

The main problem you are facing at is:(您面临的主要问题是:)

Storing data to local Storage will only store data.(将数据存储到本地存储将仅存储数据。) Employee is a class and addNewSkill is a method of this class, so that information will be lost when storing the data.(Employee是一个类, addNewSkilladdNewSkill的一种方法, 因此在存储数据时信息将丢失 。) The second problem you have is, you have no unique IDs for the employee.(您遇到的第二个问题是,您没有该员工的唯一ID。) So how to know if you add a skill for a given employee how to update that skill to exactly that employee?(那么,如何知道您是否为给定的员工添加了一项skill ,如何将该技能更新为该员工呢?) There might be better ways, I've used the index you get from the stored json array.(可能有更好的方法,我使用了从存储的json数组中获取的索引。) Not the best solution, but it works.(不是最好的解决方案,但它可以工作。) There might also be better ways to map the data back to the Employee class.(可能还有更好的方法将数据映射回Employee类。) But I guess this should help you to proceed from where you got stuck:(但是我想这应该可以帮助您从陷入困境的地方着手:) <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, "[email protected]")); employeeList.push (new Employee("Mads", "Male","IT", 1999, "[email protected]")); employeeList.push (new Employee("Jessica", "Female", "Sales",1998, "[email protected]")); employeeList.push (new Employee("Benjamin", "Male","IT", 1997, "[email protected]")); 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>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...