前端form表单，当我填了一部分的数据，离开页面，当我返回这个表单的时候，希望刚刚填写的数据还在

whisper
7 阅读4分钟

为了实现前端 form 表单在离开页面再返回时仍能保留已填写的数据，可利用浏览器本地存储、keep-alive、URL 参数、表单状态管理库等方法，以下是具体介绍：

使用浏览器本地存储

  • localStorage

    • 存储数据：在表单的input等元素的onchange或oninput事件中，将用户输入的数据存储到localStorage中。可以以表单字段的name属性为键，以用户输入的值为值进行存储。例如：

javascript

const inputs = document.querySelectorAll('input');
inputs.forEach(input => {
    input.addEventListener('change', () => {
        localStorage.setItem(input.name, input.value);
    });
});

  • 恢复数据：在页面加载时，从localStorage中获取数据并填充到相应的表单字段中。例如：

javascript

const inputs = document.querySelectorAll('input');
inputs.forEach(input => {
    const storedValue = localStorage.getItem(input.name);
    if (storedValue!== null) {
        input.value = storedValue;
    }
});
  • sessionStorage：与localStorage类似，sessionStorage也可以用于存储表单数据。不同之处在于，sessionStorage中的数据在当前会话结束后会被清除，而localStorage中的数据除非被主动清除，否则会一直存在。使用方法与localStorage基本相同，只需将localStorage替换为sessionStorage即可。

keep-alive 方式实现

在前端使用keep-alive实现 form 表单填写一部分数据后离开页面再返回数据仍在，通常在 Vue.js 框架中进行，以下是具体步骤：

  • 包裹表单组件

在 Vue 组件中，确保keep-alive组件包裹了包含表单的组件。可以在父组件的模板中使用keep-alive来包裹子组件，其中FormComponent是包含表单的子组件。

html

<template>
  <div>
    <keep-alive>
      <FormComponent></FormComponent>
    </keep-alive>
  </div>
</template>

  • 定义表单组件

在表单组件FormComponent内部，使用data函数来定义表单数据，并在created钩子函数中，如果存在缓存数据，则将其设置为表单的初始值。

html

<template>
  <form>
    <input type="text" v-model="formData.name" placeholder="Name">
    <input type="email" v-model="formData.email" placeholder="Email">
    <!-- 其他表单字段 -->
  </form>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        name: '',
        email: ''
      }
    };
  },
  created() {
    // 尝试从本地存储获取表单数据
    const storedData = localStorage.getItem('formData');
    if (storedData) {
      this.formData = JSON.parse(storedData);
    }
  },
  beforeRouteLeave(to, from, next) {
    // 在离开路由前，将表单数据存储到本地存储
    localStorage.setItem('formData', JSON.stringify(this.formData));
    next();
  }
};
</script>

  • 处理组件激活与缓存

在表单组件中，可以利用activated和deactivated钩子函数来处理一些与缓存相关的逻辑。比如，在activated钩子函数中可以执行一些初始化操作，确保表单在每次激活时都处于正确的状态。

html

<script>
export default {
  // 其他选项...
  activated() {
    // 组件被激活时执行的逻辑
    // 例如，可以在这里进行一些数据的更新或UI的调整
    console.log('表单组件被激活');
  },
  deactivated() {
    // 组件被缓存时执行的逻辑
    // 可以在这里进行一些清理操作，如清除定时器等
    console.log('表单组件被缓存');
  }
};
</script>

上述代码结合了keep-alive和localStorage来实现表单数据的缓存。keep-alive确保组件在切换时不会被销毁，localStorage用于在页面刷新或关闭后仍然保留表单数据。

使用 URL 参数

  • 编码数据：当用户在表单中输入数据时，将数据编码为 URL 参数。可以使用URLSearchParams对象来处理 URL 参数。例如：

javascript

const form = document.getElementById('myForm');
form.addEventListener('input', () => {
    const formData = new FormData(form);
    const params = new URLSearchParams(formData);
    window.history.replaceState(null, '', '?' + params.toString());
});
  • 解码数据：在页面加载时，从 URL 中解析出参数，并将数据填充到表单字段中。例如：

javascript

const urlParams = new URLSearchParams(window.location.search);
const form = document.getElementById('myForm');
for (const [name, value] of urlParams.entries()) {
    const input = form.querySelector(`[name="${name}"]`);
    if (input) {
        input.value = value;
    }
}

使用表单状态管理库

  • 选择合适的库：如Formik（用于 React）、Vuelidate（用于 Vue）等专门的表单状态管理库。这些库提供了更高级的表单处理功能，包括数据存储、验证、状态管理等。
  • 使用库的功能：以Formik为例，它提供了useFormik钩子函数来管理表单状态。可以在表单组件中使用useFormik，并通过initialValues属性来设置表单的初始值。当用户输入数据时，Formik会自动更新表单状态。在页面重新加载时，可以将之前存储在本地存储或其他地方的数据作为initialValues传递给useFormik，从而实现数据的恢复。例如在 React 中：

javascript

import { useFormik } from 'formik';

const initialValues = {
    // 从本地存储或其他地方获取初始值
    name: localStorage.getItem('name') || '',
    email: localStorage.getItem('email') || ''
};

const formik = useFormik({
    initialValues,
    onSubmit: values => {
        // 处理表单提交
    }
});

return (
    <form onSubmit={formik.handleSubmit}>
        <input
            type="text"
            name="name"
            onChange={formik.handleChange}
            value={formik.values.name}
        />
        <input
            type="email"
            name="email"
            onChange={formik.handleChange}
            value={formik.values.email}
        />
        <button type="submit">Submit</button>
    </form>
);

使用浏览器的自动填充功能

  • 设置表单字段属性：为表单的input元素设置正确的name和autocomplete属性。autocomplete属性可以设置为on或off，默认为on，表示允许浏览器自动填充。例如：

html

<input type="text" name="name" autocomplete="on" />
<input type="email" name="email" autocomplete="on" />
  • 利用浏览器行为：浏览器会根据用户之前在其他表单中的输入记录，自动填充具有相同name属性的表单字段。
avatar
文章
阅读
粉丝