Question

我想知道如何将用户输入的文本保存在表格中？

我放了<td> <input type="text" size="8"></td>。

是否可以让用户在文本框中键入文本，然后在用户输入的文本仍然存在的情况下重新加载页面？

谢谢！

Answer 1

原始HTML无法做到这一点。但是，可以通过两种不同的方式实现 - 使用JavaScript localStorage将数据存储在访问者的浏览器中，或者将数据存储在服务器端将变量输出到页面的数据库。

在访问者的浏览器中存储数据：

首先，您要确保为输入字段指定id，以便更轻松地使用JavaScript进行定位。我要给它提供身份证variable：

<td><input id="variable" type="text" size="8"></td>

然后你需要一个触发器＆＃39;告诉JavaScript何时存储用户输入的内容localStorage的机制。我打算在键盘上执行此操作（通过调用名为remember的函数），以便每当用户键入内容时，浏览器都会记住它，而无需点击按钮或类似的任何内容：< / p>

<td><input id="variable" type="text" size="8" onkeyup="remember()"></td>

然后我们需要在localStorage中构建一个实际存储用户输入的函数：

function remember() {
  if (typeof(Storage) !== "undefined") {
    localStorage.setItem('userinput', document.getElementById("variable").value);
  }
  else {
    document.getElementById("variable").value = "Sorry, your browser does not support web storage.";
  }
}

最后，我们需要构建第二个函数，该函数将在加载页面时执行，告诉浏览器加载来自localStorage的信息：

window.onload = function retrieve() {
  if (typeof(Storage) !== "undefined") {
    if (localStorage.userinput) {
      document.getElementById("variable").value = localStorage.userinput;
    }
  }
}

我已经创建了一个JSFiddle，将所有内容整合在一起，并演示了此功能here（点击＆＃39; Run＆＃39;等同于刷新）。

有关在localStorage中存储数据的详细信息，请查看HTML5 Web Storage上的W3School页面。

在服务器上存储数据：

要将数据保存到数据库，您需要像PHP这样的后端语言来处理数据库的实际插入。要将数据从HTML发送到后端，您（最常见）会想要使用表单。表单元素需要名称属性才能由后端进行解释。在以下示例中，我使用PHP，并调用用户输入的数据'variable'：

<强> HTML：

<form action="/action_page.php">
  <input type="text" name="variable" size="8">
  <input type="submit" value="Submit">
</form>

PHP（action_page.php）：

$data = $_POST['variable'];

PHP现在包含用户在名为$data的变量中输入的任何内容，并且可以将其插入数据库中。如何插入数据取决于您使用的方法 - MySQL，MySQLi或PDO。请记住，PHP的MySQL扩展名是deprecated as of PHP 5.5和removed as of PHP 7.0，所以我建议不要使用它。

有关向后端发送数据的详细信息，请查看HTML Forms和PHP Form Handling上的W3School页面。

希望这有帮助！：）

如何保存用户输入的文本，以便在重新加载页面时重新显示用户输入的文本？

1 个答案:

在访问者的浏览器中存储数据：

在服务器上存储数据：