从 localStorage 保存和检索 HTML table

Question

我目前正在开发一个应用程序，该应用程序将从多个输入中获取数据，将其添加到 HTML table 并将其存储到本地存储。我使用 HTML tables 因为我想实现将数据下载为 XLSX 文件的选项，为此我使用 sheet.js 与 [=34] 一起使用=]s.

我设法创建了获取、存储数据并向用户显示数据的功能，但我在使用 'delete' 选项时遇到了困难。我希望用户能够删除每一行，但我不确定在删除元素后如何更新本地存储。

下面是我为这个应用程序编写的代码（如果它看起来令人困惑，请多多包涵，但这距离我开始学习只有 1 个月 Javascript）。

const textInput = document.querySelector("#text-input");
const btnInput = document.querySelector("#btn-input");
const tableBody = document.querySelector("tbody");
const nameInput = document.querySelector("#name-input");
const ageInput = document.querySelector("#age-input");
const btnDownload = document.querySelector("#download");
const table = document.querySelector("#main-table");
document.addEventListener("DOMContentLoaded", getData);
btnInput.addEventListener("click", (e) => {
  e.preventDefault();
  newData();
});

// THIS FUNCTION CREATES NEW ROWS AND TABLE DATA FROM THE USER INPUT AND ADD IT TO THE MAIN TABLE

function newData() {
  let newRow = document.createElement("TR");
  let newName = document.createElement("TD");
  let newAge = document.createElement("TD");
  let newBtn = document.createElement("button");

  newRow.append(newName);
  newRow.append(newAge);
  newRow.append(newBtn);

  newBtn.innerText = "delete";
  newName.innerText = nameInput.value;
  newAge.innerText = ageInput.value;

  saveLocalName(nameInput.value);
  saveLocalAge(ageInput.value);

  tableBody.append(newRow);

  const newDeleteBtn = () => {
    newBtn.onclick = () => newRow.remove();
  };
  newDeleteBtn();
}

/* ---------- THIS FUNCTION WILL SAVE THE DATA FROM THE NAME INPUT TO THE LOCAL STORAGE --------- */

function saveLocalName(name) {
  let names;
  if (localStorage.getItem("names") === null) {
    names = [];
  } else {
    names = JSON.parse(localStorage.getItem("names"));
  }
  names.push(name);
  localStorage.setItem("names", JSON.stringify(names));
}

/* ---------- THIS FUNCTION WILL SAVE THE DATA FROM THE AGE INPUT TO THE LOCAL STORAGE --------- */

function saveLocalAge(age) {
  let ages;
  if (localStorage.getItem("ages") === null) {
    ages = [];
  } else {
    ages = JSON.parse(localStorage.getItem("ages"));
  }
  ages.push(age);
  localStorage.setItem("ages", JSON.stringify(ages));
}

/* ------- THIS FUNCTION WILL RETRIEVE THE DATA FROM THE LOCAL STORAGE ------ */

function getData() {
  let ages;
  let names;

  if (
    localStorage.getItem("ages") === null &&
    localStorage.getItem("names") === null
  ) {
    ages = [];
    names = [];
  } else {
    ages = JSON.parse(localStorage.getItem("ages"));
    names = JSON.parse(localStorage.getItem("names"));
  }

  ages.forEach((age, index) => {
    const name = names[index];
    let newRow = document.createElement("TR");
    let newAge = document.createElement("TD");
    let newName = document.createElement("TD");
    let newBtn = document.createElement("button");

    newBtn.innerText = "delete";
    newRow.append(newName);
    newRow.append(newAge);
    newRow.append(newBtn);
    newAge.innerText = age;
    newName.innerText = name;
    tableBody.append(newRow);
    const newDeleteBtn = () => {
      newBtn.onclick = () => {
        newRow.remove();
      };
    };
    newDeleteBtn();
  });
}

/* ------------------- FUNCTION TO EXPORT THE FILE AS XLSX ------------------ */

function exportXLSX(type) {
  const data = table;
  const file = XLSX.utils.table_to_book(data, { sheet: "sheet1" });
  XLSX.write(file, { bookType: type, bookSST: true, type: "base64" });
  XLSX.writeFile(file, "file." + type);
}

btnDownload.addEventListener("click", () => {
  exportXLSX("xlsx");
});

@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");

/* SIMPLE CSS RESET */

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

body {
  background-color: #ffffff;
  background-attachment: fixed;
  font-family: "Poppins", sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

header {
  align-items: center;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>javascript Sandbox</title>
  <link rel="icon" href="data:;base64,=" />
  <link rel="stylesheet" href="style.css" />
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script src="https://unpkg.com/xlsx/dist/xlsx.full.min.js"></script>
</head>

<body>
  <form action="" id="text-input">
    <input type="text" placeholder="Enter Name" id="name-input">
    <input type="text" placeholder="Enter Age" id="age-input">
    <button id="btn-input">Submit</button>
  </form>

  <table id="main-table">
    <thead>
      <tr>
        <th>name</th>
        <th>age</th>
      </tr>
    </thead>
    <tbody>

    </tbody>
  </table>
  <button id="download">Download</button>
  <script src="script.js"></script>
</body>

</html>

如果有人可以帮助解决我面临的这个问题，我将不胜感激。谢谢

Answer 1

每当您将行数据存储在本地存储中时，然后将其存储在某些 ID 中，例如

{id : 1, value : 'abc'}

所以每当你想删除它时，首先通过这个id从本地存储中获取值，然后你就可以删除它。

从 localStorage 保存和检索 HTML table

Save and retrieve HTML table from localStorage

html

javascript

html-table

local-storage