javascript - 如何将数据保存在本地存储中？

Question

我想使用本地存储选项，即使页面刷新，数据也会显示在屏幕上。就像使用 addRow() 添加行时一样，然后我刷新页面，我还需要查看包含添加的行数据的表。

我想使用 javascript，因为我是 javascript 新手，我需要一些帮助。我能够自己进行编辑和删除选项。但我在使用本地存储方面需要帮助。

    let addRow = () => {
      let name = document.getElementById("name").value;
      let age = document.getElementById("age").value;
      let email = document.getElementById("email").value;
      let contact = document.getElementById("number").value;
        
      if(name === ""){
        alert('Please Fill Your Full Name');
        document.getElementById("name").focus();
        return false;
      }
      if(age === ""){
        alert('Please Fill Your Age');
        document.getElementById("age").focus();
        return false;
      }
      if(email === ""){
        alert('Please Fill Your Email');
        document.getElementById("email").focus();
        return false;
      }
      if(contact === ""){
        alert('Please Fill Your Mobile Number');
        document.getElementById("number").focus();
        return false;
      }
        
      let tr=document.createElement('tr');
      tr.innerHTML=`
      <td>${name}</td>
      <td>${age}</td>
      <td>${email}</td>
      <td>${contact}</td>
      <td>
        <button type="button" class="btn btn-warning" id="editBtn"> Edit </button>
        <button type="button" class="btn btn-danger" id="deleteBtn"> Delete </button>
      </td>`
        
      document.getElementById("tableDisplay").appendChild(tr);
      document.getElementById("name").value = '';
      document.getElementById("age").value = '';
      document.getElementById("email").value = '';
      document.getElementById("number").value = '';
      document.getElementById("tableDisplay").value = '';
    };
    document.getElementById("tableDisplay").addEventListener("click", (event) => {
      if (event.target.matches("#deleteBtn")) {
        let row = event.target.closest("tr");
        row.remove();
      }
    });

document.getElementById("tableDisplay").addEventListener("click", (event) => {
  if (event.target.matches("#editBtn")) {
    let row = event.target.closest("tr");
    row.setAttribute("contenteditable", "true");
    alert("Click on the text you want to edit!");
    row.cells[4].innerHTML = `<button type="button" class="btn btn-primary" id="saveBtn"> Save </button>`;
  }
});

document.getElementById("tableDisplay").addEventListener("click", (event) => {
  if (event.target.matches("#saveBtn")) {
    let row = event.target.closest("tr");
    row.setAttribute("contenteditable", "false");
    alert("Row data changed!");
    row.cells[4].innerHTML = `
      <button type="button" class="btn btn-warning" id="editBtn"> Edit </button>
      <button type="button" class="btn btn-danger" id="deleteBtn"> Delete </button>`;
  }
});
        
    document.getElementById("done").addEventListener("click", addRow);

    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
    <div class="border border-dark rounded p-1 bg-light">
      <table class="text-center table" align="center" id="tableDisplay">
          <tr class="bg-warning">
            <th>Name</th>
            <th>Age</th>
            <th>Email</th>
            <th>Contact Number</th>
            <th></th>
          </tr>
          <tr>
            <td>John</td>
            <td>26</td>
            <td>[e-mail]</td>
            <td>[phone]</td>
            <td>
              <button type="button" class="btn btn-warning" id="editBtn"> Edit </button>
              <button type="button" class="btn btn-danger" id="deleteBtn"> Delete</button>
            </td>
          </tr>
          <tr>
            <td>Jimmy</td>
            <td>45</td>
            <td>[e-mail]</td>
            <td>[phone]</td>
            <td>
              <button type="button" class="btn btn-warning" id="editBtn"> Edit </button>
              <button type="button" class="btn btn-danger" id="deleteBtn"> Delete</button>
            </td>
          </tr>
          <tr>
            <td>Sarah</td>
            <td>32</td>
            <td>[e-mail]</td>
            <td>[phone]</td>
            <td>
              <button type="button" class="btn btn-warning" id="editBtn"> Edit </button>
              <button type="button" class="btn btn-danger" id="deleteBtn"> Delete</button>
            </td>
          </tr>
          <tr>
            <td>Vanessa</td>
            <td>22</td>
            <td>[e-mail]</td>
            <td>[phone]</td>
            <td>
              <button type="button" class="btn btn-warning" id="editBtn"> Edit </button>
              <button type="button" class="btn btn-danger" id="deleteBtn"> Delete</button>
            </td>
          </tr>
        </table>
    </div>
    <div class="border border-dark rounded bg-warning p-3 mt-5">
      <form>
        <div class="form-group row">
          <label for="name" class="col-md-2 col-form-label">Name</label>
          <div class="col-md-10">
            <input class="form-control" type="text" placeholder="Full Name" id="name">
          </div>
        </div>
        <div class="form-group row">
          <label for="number" class="col-md-2 col-form-label">Age</label>
          <div class="col-md-10">
            <input class="form-control" type="number" placeholder="Age" id="age">
          </div>
        </div>
        <div class="form-group row">
          <label for="email" class="col-md-2 col-form-label">Email</label>
          <div class="col-md-10">
            <input class="form-control" type="email" placeholder="[e-mail]" id="email">
          </div>
        </div>
        <div class="form-group row">
          <label for="number" class="col-md-2 col-form-label">Contact Number</label>
          <div class="col-md-10">
            <input class="form-control" type="text" placeholder="Call On" id="number">
          </div>
        </div>
      </form>
      <button class="btn btn-primary btn-block" id="done">ADD</button>
    </div>

标签： javascripthtmlcss

Answer 1

您的 HTML 存在一些问题。您有多个具有相同 id 的元素：例如

id="editBtn" & id="deleteBtn".  

此外，您在第 th 列中有 5 列，但在行中只有 4 列。我稍微编辑了 HTML 和 JS，看起来它会删除行。您拥有它的方式是在 tbody 之后附加行，但您希望在 tbody 之前添加该行，所以我在 tbody 中添加了一个 id，但您可以用另一种方式处理。

window.delRow = function(element)

在那里是因为 Fiddle 显然将函数包装在一个函数中，因此调用它时出现问题。不是一个完整的答案，但我希望这会有所帮助。您必须查看有哪些浏览器支持：

element.closest('tr').remove();

我将 HTML 更改为：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div class="border border-dark rounded p-1 bg-light">
    <table class="text-center table" align="center" id="tableDisplay">
      <thead class="bg-warning">
        <tr>
          <th>Name</th>
          <th>Age</th>
          <th>Email</th>
          <th>Contact Number</th>
          <th></th>
        </tr>
      </thead>
      <tbody id = "tabelBody">
        <tr>
          <td>1</td>
          <td>Hello</td>
          <td>2</td>
          <td>2</td>
          <td>
            <button type="button" class="btn btn-warning editBtn"><i class="fa fa-pencil" aria-hidden="true"></i></button>
            <button type="button" class="btn btn-danger deleteBtn" onclick="delRow(this)"><i class="fa fa-trash" aria-hidden="true"></i></button>
          </td>
        </tr>
        <tr>
            <td>2</td>
            <td>Hello</td>
            <td>2</td>
            <td>2</td>
            <td>
              <button type="button" class="btn btn-warning editBtn"><i class="fa fa-pencil" aria-hidden="true"></i></button>
              <button type="button" class="btn btn-danger deleteBtn" onclick="delRow(this)"><i class="fa fa-trash" aria-hidden="true"></i></button>
            </td>
          </tr>
          <tr>
              <td>3</td>
              <td>Hello</td>
              <td>2</td>
              <td>2</td>
              <td>
                <button type="button" class="btn btn-warning editBtn"><i class="fa fa-pencil" aria-hidden="true"></i></button>
                <button type="button" class="btn btn-danger deleteBtn" onclick="delRow(this)"><i class="fa fa-trash" aria-hidden="true"></i></button>
              </td>
            </tr>
      </tbody>
    </table>
  </div>
  <div class="border border-dark rounded bg-warning p-3 mt-5">
    <form>
      <div class="form-group row">
        <label for="name" class="col-md-2 col-form-label">Name</label>
        <div class="col-md-10">
          <input class="form-control" type="text" placeholder="Full Name" id="name">
        </div>
      </div>
      <div class="form-group row">
        <label for="number" class="col-md-2 col-form-label">Age</label>
        <div class="col-md-10">
          <input class="form-control" type="number" placeholder="Age" id="age">
        </div>
      </div>
      <div class="form-group row">
        <label for="email" class="col-md-2 col-form-label">Email</label>
        <div class="col-md-10">
          <input class="form-control" type="email" placeholder="[e-mail]" id="email">
        </div>
      </div>
      <div class="form-group row">
        <label for="number" class="col-md-2 col-form-label">Contact Number</label>
        <div class="col-md-10">
          <input class="form-control" type="text" placeholder="Call On" id="number">
        </div>
      </div>
    </form>    
    <button class="btn btn-primary btn-block" id="done">ADD</button>
  </div>

以及对此的JS：

let addRow = () => {
  let name = document.getElementById("name").value;
  let age = document.getElementById("age").value;
  let email = document.getElementById("email").value;
  let contact = document.getElementById("number").value;

  let tr=document.createElement('tr');
  tr.innerHTML=`
  <td>${name}</td>
  <td>${age}</td>
  <td>${email}</td>
  <td>${contact}</td>
  <td>
    <button type="button" class="btn btn-warning editBtn"><i class="fa fa-pencil" aria-hidden="true"></i></button>
    <button type="button" class="btn btn-danger deleteBtn" onclick="delRow(this)"><i class="fa fa-trash" aria-hidden="true"></i></button>
  </td>`

  document.getElementById("tabelBody").appendChild(tr);
  document.getElementById("name").value = '';
  document.getElementById("age").value = '';
  document.getElementById("email").value = '';
  document.getElementById("number").value = '';
  document.getElementById("tableDisplay").value = '';
};

window.delRow = function(element) {
    alert("test");
  element.closest('tr').remove();
}

document.getElementById("done").addEventListener("click", addRow);

不确定您在编辑时想要做什么。

显然有一个关于 JS 包装的 Fiddle 设置。