保存用户信息到本地存储

Dabenshi

发布于 2023-08-27 08:22:14

2090

发布于 2023-08-27 08:22:14

文章被收录于专栏：DabenshiDabenshi

简介：在页面加载时从本地存储中恢复数据，并将已保存的数据显示在对应的输入框中。一起来看看：

获取表单元素：通过getElementById方法获取name、email和weburl输入框的DOM元素。
定义保存数据函数：saveData函数会从输入框中获取值，并使用localStorage.setItem方法将值保存到本地存储中。
监听输入框输入事件：通过addEventListener方法，将saveData函数绑定到name、email和weburl输入框的input事件上，当输入框中输入信息时自动保存数据。
页面加载时恢复数据：使用window.onload事件，在页面加载完成后检查本地存储中是否存在之前保存的数据，如果存在则将数据填充到相应的输入框中。

注意：下面这段代码只是前端jаvascript脚本的一部分，需要在HTML文档中正确引入和调用。

复制代码

<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()语句，将保存成功的消息输出到控制台。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2023-08-26 ，如有侵权请联系 cloudcommunity@tencent.com 删除

存储