- 智能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 条评论
关于作者
