前端数据缓存_antdesign前端表单数据实时缓存-CSDN博客

本文链接：https://blog.csdn.net/weixin_55605689/article/details/141814070

实现在页面重新加载后仍然保留用户之前填写的数据，你可以使用 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>