bootstrap生成一个文本输入框，并且每次点击提交都会保存输入框内容到本地，每次打开或刷新网页自动读取上次的输入内容，如何实现
要实现在 Bootstrap 中生成一个文本输入框，并在每次点击提交按钮时保存输入框的内容到本地，并且在每次打开或刷新网页时自动读取上次的输入内容，你可以使用 JavaScript 的 localStorage 来实现。
以下是一个示例代码：
```html
<!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()` 方法将输入内容保存到本地存储中，并弹出一个提示框表示保存成功。
这样，每次打开或刷新网页时，都会自动读取上次保存的输入内容，并将其填充到文本输入框中。
希望能对你有所帮助！
AI智能问答网
免责声明：
以上内容除特别注明外均来源于网友提问，创作工场回答，未经许可，严谨转载。
点击这里>>使用创作工场，更聪明、更完整、更原创！