实现在页面重新加载后仍然保留用户之前填写的数据，你可以使用 localStorage 或 sessionStorage 来存储数据。这里是一个简单的步骤，展示如何使用 localStorage 来保存和恢复数据：
1.保存数据到 localStorage
当用户填写表单或输入数据时，你可以将这些数据保存到 localStorage。
function saveData() {
// 假设你有一个表单，用户可以输入数据
const formData = {
name: document.getElementById('name').value,
email: document.getElementById('email').value,
// 其他输入字段...
};
// 将对象转换为 JSON 字符串并保存到 localStorage
localStorage.setItem('formData', JSON.stringify(formData));
}2. 从 localStorage 加载数据
当页面加载时，可以检查 localStorage 中是否有保存的数据，并将其恢复到表单中。
function loadData() {
// 从 localStorage 获取保存的数据
const savedData = localStorage.getItem('formData');
if (savedData) {
// 将 JSON 字符串转换回对象
const formData = JSON.parse(savedData);
// 将数据填充到表单中
document.getElementById('name').value = formData.name;
document.getElementById('email').value = formData.email;
// 填充其他输入字段...
}
}
// 在页面加载时调用 loadData 函数
window.onload = loadData;3. HTML 示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>保存表单数据示例</title>
</head>
<body>
<form id="myForm">
<input type="text" id="name" placeholder="姓名">
<input type="email" id="email" placeholder="电子邮件">
<button type="button" onclick="saveData()">保存</button>
</form>
<script>
function saveData() {
const formData = {
name: document.getElementById('name').value,
email: document.getElementById('email').value,
};
localStorage.setItem('formData', JSON.stringify(formData));
}
function loadData() {
const savedData = localStorage.getItem('formData');
if (savedData) {
const formData = JSON.parse(savedData);
document.getElementById('name').value = formData.name;
document.getElementById('email').value = formData.email;
}
}
window.onload = loadData;
</script>
</body>
</html>