如何从表单中获取信息并将其放入包含 HTML、CSS 和 Javascript 的表格中？

Question

我是 HTML/CSS/JS 的新手，我想知道如何从表单中获取信息并将其存储在表格中。

例如，用户将在表单中输入他们的姓名并按下创建按钮。这将创建一个包含用户名的表。但是，即使在刷新选项卡后，我也希望数据保留在表中。我相信这需要一台服务器。请指出我正确的方向。下面是我的 HTML，后面是我的 JS。

说明： 当标签刷新时，其他访问该网站的人应该能够看到用户输入的表格中的数据。 每次用户在表格上按回车键时，它应该添加一个新行而不删除之前的行。

我相信我必须使用服务器，那么谁能告诉我如何将它与我想要做的事情结合使用，如上所述？谢谢！

HTML

<form>
        <label for="name">Name:</label><br>
        <input type="text" id="name" name="name"<br>
</form>


JS

function refresh() {
    var table = document.getElementById("infotable");
    let row = table.insertRow(1);
    let cell1 = row.insertCell(0);
    cell1.innerHTML = document.getElementById("name").value;
}

Answer 1

嗯，实际上您不需要服务器。您可以将数据保存在localStorage。查看这个注释示例：

const result = document.getElementById("result");
const saved = JSON.parse(localStorage.getItem("save")); // get saved items
if (saved) {
  const t =
    `<table>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Hobby</th>
    </tr>
    <tr>
      <td>${saved.name}</td>
      <td>${saved.age}</td>
      <td>${saved.hobby}</td>
    </tr>
  </table>`;
  result.innerHTML = t; // show the result
}

const form = document.getElementById("my-form"); // get the form element
form.addEventListener("submit", e => {
  // detect once the submit button is clicked
  e.preventDefault(); // Don't allow the form to redirect to another page
  const {
    elements
  } = form; // Get input elements so we can retrieve their values
  const output = {
    name: elements.name.value, // get name
    age: +elements.age.value, // get age; the "+" in front converts it to a number
    hobby: elements.hobby.value // get hobby
  };
  localStorage.setItem("save", JSON.stringify(output)); // save output to localStorage
  // Create a template
  const template =
    `<table>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Hobby</th>
    </tr>
    <tr>
      <td>${output.name}</td>
      <td>${output.age}</td>
      <td>${output.hobby}</td>
    </tr>
  </table>`;
  result.innerHTML = template; // show the result
});

<form id="my-form">
  <!-- some dummy inputs -->
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" placeholder="Enter your name...">
  <br>
  <label for="age">Age:</label>
  <input type="number" id="age" name="age" placeholder="Enter your age...">
  <br>
  <label for="hobby">Hobby:</label>
  <input type="text" id="hobby" name="hobby" placeholder="Enter your hobby...">
  <br>
  <input type="submit" />
</form>
<div id="result"></div>

注意：localStorage 在上面的示例中不起作用，因为嵌入不允许它。

Answer 2

如果您想要长期存储，是的，您需要使用某种带有数据库的后端解决方案。但是，还有其他选项，例如 cookie 和 localStorage。

由于安全限制，这在 sn-p 中不起作用，但它会将用户输入保留在 localStorage 中，并在他们每次访问页面时显示

https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

<form onsubmit='do_fn()'>
        <label for="name">Name:</label><br>
        <input type="text" id="name" name="name"<br>
        <button type='submit'>submit</button>
</form>

<div class='showname' hidden>Your name is <span></span></div>

<script>
  function do_fn() {
    localStorage.setItem('name', document.querySelector('#name').value);
  }

  // here is where you can detect it when they come back.
  window.addEventListener('DOMContenetLoaded', function() {
    let n = localStorage.getItem('name');
    let d = document.querySelector('.showname')
    if (n && n!='')  {
      d.removeAttribute('hidden');
      d.querySelector('span').innerText = n;
    }
  })
</script>