简介：在页面加载时从本地存储中恢复数据，并将已保存的数据显示在对应的输入框中。一起来看看：
- 获取表单元素：通过
getElementById方法获取name、email和weburl输入框的DOM元素。 - 定义保存数据函数：
saveData函数会从输入框中获取值，并使用localStorage.setItem方法将值保存到本地存储中。 - 监听输入框输入事件：通过
addEventListener方法，将saveData函数绑定到name、email和weburl输入框的input事件上，当输入框中输入信息时自动保存数据。 - 页面加载时恢复数据：使用
window.onload事件，在页面加载完成后检查本地存储中是否存在之前保存的数据，如果存在则将数据填充到相应的输入框中。
注意：下面这段代码只是前端jаvascript脚本的一部分，需要在HTML文档中正确引入和调用。
复制代码
代码语言：javascript复制<script>
// 获取表单元素
var nameInput = document.getElementById("name");
var mailInput = document.getElementById("email");
var weburlInput = document.getElementById("weburl");
// 保存参数到本地存储
function saveData() {
var name = nameInput.value;
var mail = mailInput.value;
var weburl = weburlInput.value;
localStorage.setItem("name", name);
localStorage.setItem("mail", mail);
localStorage.setItem("weburl", weburl);
console.log("数据已保存！");
}
// 监听输入框输入事件，自动保存数据
nameInput.addEventListener("input", saveData);
mailInput.addEventListener("input", saveData);
weburlInput.addEventListener("input", saveData);
// 页面加载时从本地存储中恢复数据
window.onload = function() {
if (localStorage.getItem("name")) {
nameInput.value = localStorage.getItem("name");
}
if (localStorage.getItem("mail")) {
mailInput.value = localStorage.getItem("mail");
}
if (localStorage.getItem("weburl")) {
weburlInput.value = localStorage.getItem("weburl");
}
};
</script>
定义 saveData() 函数后，通过使用addEventListener()方法监听输入框的input事件，这样当输入框中输入内容时，会自动触发保存数据的操作。
当输入内容时，saveData() 函数会被触发，并将输入框的值保存到本地存储中。同时，通过在代码中添加console.log()语句，将保存成功的消息输出到控制台。
