• 智能AI问答!更聪明、更完整、原创作!
  • 一款基于GPT的超级AI机器人,可以回答问题、聊天、创作、写文案!

bootstrap生成一个文本输入框,并且每次点击提交都会保存输入框内容到本地,每次打开或刷新网页自动读取上次的输入内容,如何实现

发布于 2024-02-19 22:11:40

要实现在 Bootstrap 中生成一个文本输入框,并在每次点击提交按钮时保存输入框的内容到本地,并且在每次打开或刷新网页时自动读取上次的输入内容,你可以使用 JavaScript 的 localStorage 来实现。

以下是一个示例代码:

<!DOCTYPE html>
<html>
<head>
  <title>保存输入内容</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
  <div class="container mt-5">
    <form id="myForm">
      <div class="form-group">
        <label for="inputContent">输入内容:</label>
        <input type="text" class="form-control" id="inputContent" placeholder="请输入内容">
      </div>
      <button type="submit" class="btn btn-primary">提交</button>
    </form>
  </div>

  <script>
    // 在页面加载完成后执行
    window.onload = function() {
      // 读取上次保存的输入内容
      var savedContent = localStorage.getItem("inputContent");
      if (savedContent) {
        document.getElementById("inputContent").value = savedContent;
      }
    }

    // 提交表单时保存输入内容
    document.getElementById("myForm").addEventListener("submit", function(event) {
      event.preventDefault(); // 阻止表单的默认提交行为

      var inputContent = document.getElementById("inputContent").value;
      localStorage.setItem("inputContent", inputContent);
      alert("输入内容已保存!");
    });
  </script>
</body>
</html>

在上述代码中,我们使用了 Bootstrap 样式来生成一个简单的表单,其中包含一个文本输入框和一个提交按钮。

在 JavaScript 部分,我们使用 window.onload 事件来确保在页面加载完成后执行代码。在该代码中,我们通过 localStorage.getItem() 方法读取上次保存的输入内容,并将其设置为输入框的值。

然后,我们使用 addEventListener() 方法来监听表单的提交事件。当用户点击提交按钮时,我们使用 localStorage.setItem() 方法将输入内容保存到本地存储中,并弹出一个提示框表示保存成功。

这样,每次打开或刷新网页时,都会自动读取上次保存的输入内容,并将其填充到文本输入框中。

希望能对你有所帮助!

0 条评论

发布
问题

在线
客服