要实现在 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()
方法将输入内容保存到本地存储中,并弹出一个提示框表示保存成功。
这样,每次打开或刷新网页时,都会自动读取上次保存的输入内容,并将其填充到文本输入框中。
希望能对你有所帮助!