CURD Operation using Javascript

I am new in this field.

1. I have some problem when we refersh the webpage the table data is clear. what i want is when we refesh the page the table data is remain same.

2. When we update the the record in the table it create new field in the localstorage. what i want is when we update field in localstorage it does not create new field only update this field.

3. When we delete the any field in the table the localstorage data is remain same. what i want is when we delete any field in the table the corresponding field in the localstorage is also delete. Thank You

   Employee Data

   Employee Record

   Employee ID

   Enter Employee ID

   Employee Name

   Enter Employee Name

   Employee Designation

   Enter Employee Designation

   Employee Mobile Number

   Enter Employee Mobile Number

   Employee Salary

   Enter Employee Salary

   Sort By ID

   Employee ID
   Full Name
   Designation
   Mobile
   Salary
   Edit / delete

   * {
   margin: 0;
   padding: 0;
   

   }
   .table-heading {
   text-align: center;
   margin: 1% 0 1% 0;
   }
   .employpage {
   display: flex;
   flex-wrap: wrap;
   width: 76%;
   margin: auto;
   font-size: 16px;
   border: solid 2px #f1f1f1;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   -ms-border-radius: 5px;
   -o-border-radius: 5px;
   border-radius: 5px;
   }
   .employpage .formdata {
   width: 40%;
   padding: 15px;
   }
   .employpage .display_table {
   padding: 15px;
   width: 52%;
   }
   .employpage .display_table table {
   border: solid 1px #ccc;
   border-collapse: collapse;
   }
   .employpage .display_table td,
   .employpage .display_table th {
   border-left: solid 1px #ccc;
   border-bottom: solid 1px #ccc;
   padding: 10px 5px;
   text-align: left;
   font-size: 13px;
   }
   .employpage .display_table td:first-child,
   .employpage .display_table th:first-child {
   border-left: none;
   }
   .employpage .display_table tr {
   border-bottom: solid 1px #ccc;
   }
   .employpage .display_table tr:last-child td {
   border-bottom: none;
   }
   .formdata form {
   display: flex;
   flex-wrap: wrap;
   background: #f1f1f1;
   padding: 15px;
   }
   .formdata form label{
   display: block;
   text-align: center;
   }
   .formdata form .employee-fields{
   width: 100%;
   margin-bottom: 10px;
   }
   .formdata form input {
   outline: none;
   width: 80%;
   display: block;
   margin: auto ;
   padding: 7px;
   box-sizing: border-box;
   outline: none;
   border: 1px solid #444;
   border-radius: 4px;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   -ms-border-radius: 4px;
   -o-border-radius: 4px;
   }
   .formdata form .error{
   text-align: center;
   margin-top: 3px;
   font-size: 14px;
   visibility: hidden;
   }
   .formdata th {
   background: #f1f1f1;
   font-size: 14px;
   font-weight: bold;
   text-align: left;
   }
   .formdata .button {
   background: #000;
   padding: 5px 10px;
   font-size: 20px;
   margin: 25px auto;
   display: table;
   color: #fff;
   width: 50%;
   border-radius: 4px;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   -ms-border-radius: 4px;
   -o-border-radius: 4px;
   }
   .formdata .button:hover {
   cursor: pointer;
   }
   td {
   font-family: “Roboto-Regular”;
   font-size: 11px;
   text-align: center !important;
   }
   .edt {
   color: #0000ff;
   cursor: pointer;
   }
   .dlt {
   color: #ff0000;
   cursor: pointer;
   }
   .sort-table {
   display: block;
   background-color: transparent;
   width: 50%;
   margin: auto;
   padding: 5px 0;
   border: 1px solid #4169e1;
   color: #4169e1;
   border-radius: 4px;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   -ms-border-radius: 4px;
   -o-border-radius: 4px;
   }
   .sort-table:hover {
   background-color: #4169e1;
   color: #fff;
   cursor: pointer;
   }

   var selectedRow = null;
   var btn = document.querySelector(“.button”)
   btn.addEventListener(“click”, employdata);
   function employdata() {
   let empID = document.getElementById(’empID’).value.trim();
   let empName = document.getElementById(’empname’).value.trim();
   let empDes = document.getElementById(’empdes’).value.trim();
   let empMob = document.getElementById(’empmob’).value.trim();
   let empSal = document.getElementById(’empsal’).value.trim();
   if(empID === ”){
   document.getElementById(‘id-error’).style.visibility = “visible”;
   document.getElementById(’empID’).style.border = “2px solid red”;
   return false;
   }
   if(empName === “”){
   document.getElementById(‘name-err’).style.visibility = “visible”;
   document.getElementById(’empname’).style.border = “2px solid red”;
   return false;
   }
   if(empDes === “”){
   document.getElementById(‘des-err’).style.visibility = “visible”;
   document.getElementById(’empdes’).style.border = “2px solid red”;
   return false;
   }
   if(empMob === “”){
   document.getElementById(‘mob-err’).style.visibility = “visible”;
   document.getElementById(’empmob’).style.border = “2px solid red”;
   return false;
   }
   if(empSal === ”){
   document.getElementById(‘sal-err’).style.visibility = “visible”;
   document.getElementById(’empsal’).style.border = “2px solid red”;
   return false;
   }
   else{
   alert(‘Data Added Succesfully’);
   // return true;
   }
   var ax = read_Input_Value();
   if (selectedRow == null) {
   create_Tr_Td(ax);
   remove_input_value()
   }
   else {
   updatefunc(ax);
   remove_input_value();
   selectedRow = null;
   }
   }
   function read_Input_Value() {
   var redemp = {}
   redemp[“empID”] = document.querySelector(‘.empID’).value
   redemp[“ename”] = document.querySelector(“.empname”).value;
   redemp[“des”] = document.querySelector(“.designation”).value;
   redemp[“mob”] = document.querySelector(“.mobile”).value;
   redemp[“salary”] = document.querySelector(“.empsalary”).value;
   let user_records = new Array();
   user_records = JSON.parse(localStorage.getItem(“users”)) ? JSON.parse(localStorage.getItem(“users”)) : []
   user_records.push({
   “EmpID”: redemp[“empID”],
   “Name”: redemp[“ename”],
   “Designation”: redemp[“des”],
   “Mobile”: redemp[“mob”],
   “Salary”: redemp[“salary”]
   })
   localStorage.setItem(“users”, JSON.stringify(user_records));
   return redemp
   }
   function create_Tr_Td(x) {
   var empTable = document.querySelector(“.list”);
   var emp_tr = empTable.insertRow(empTable.length);
   var emp_td1 = emp_tr.insertCell(0);
   var emp_td2 = emp_tr.insertCell(1);
   var emp_td3 = emp_tr.insertCell(2);
   var emp_td4 = emp_tr.insertCell(3);
   var emp_td5 = emp_tr.insertCell(4);
   var emp_td6 = emp_tr.insertCell(5);
   var totalRowCount = document.querySelector(“.list tr”).length;
   emp_td1.innerHTML = x.empID;
   emp_td2.innerHTML = x.ename;
   emp_td3.innerHTML = x.des;
   emp_td4.innerHTML = x.mob;
   emp_td5.innerHTML = x.salary;
   emp_td6.innerHTML = ‘Edit / Delete’;
   }
   function remove_input_value() {
   document.querySelector(‘.empID’).value = ” “;
   document.querySelector(“.empname”).value = ” “;
   document.querySelector(“.designation”).value = ” “;
   document.querySelector(“.mobile”).value = ” “;
   document.querySelector(“.empsalary”).value = ” “;
   document.getElementById(‘id-error’).style.visibility = “hidden”;
   document.getElementById(‘name-err’).style.visibility = “hidden”;
   document.getElementById(‘des-err’).style.visibility = “hidden”;
   document.getElementById(‘mob-err’).style.visibility = “hidden”;
   document.getElementById(‘sal-err’).style.visibility = “hidden”;
   }
   function onEdit(y) {
   selectedRow = y.parentElement.parentElement;
   document.querySelector(‘.empID’).value = selectedRow.cells[0].innerHTML;
   document.querySelector(“.empname”).value = selectedRow.cells[1].innerHTML;
   document.querySelector(“.designation”).value = selectedRow.cells[2].innerHTML;
   document.querySelector(“.mobile”).value = selectedRow.cells[3].innerHTML;
   document.querySelector(“.empsalary”).value = selectedRow.cells[4].innerHTML;
   }
   function updatefunc(redemp) {
   selectedRow.cells[0].innerHTML = redemp.empID;
   selectedRow.cells[1].innerHTML = redemp.ename;
   selectedRow.cells[2].innerHTML = redemp.des;
   selectedRow.cells[3].innerHTML = redemp.mob;
   selectedRow.cells[4].innerHTML = redemp.salary;
   }
   function onDelete() {
   if (confirm(‘Are you sure to delete this record ?’)) {
   var selectdelete = document.querySelector(“a.dlt”);
   selectdelete = selectdelete.parentElement.parentElement.remove(0);
   }
   }
   function sortTable() {
   var table, rows, switching, i, x, y, shouldSwitch;
   table = document.getElementById(“employeeList”);
   switching = true;
   while (switching) {
   switching = false;
   rows = table.rows;
   for (i = 1; i < (rows.length – 1); i++) {
   shouldSwitch = false;
   x = rows[i].getElementsByTagName(“TD”)[0];
   y = rows[i + 1].getElementsByTagName(“TD”)[0];
   if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
   shouldSwitch = true;
   break;
   }
   }
   if (shouldSwitch) {
   rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
   switching = true;
   }
   }
   }