LocalStorage 插件

• 安装
• 使用
  • 基本示例
  • 在提交失败时恢复值
  • 使用唯一键
  • 使用控件
  • 使用数据修改

使用 @formkit/addons 中的 createLocalStoragePlugin 函数，您可以轻松地将未提交的用户表单输入保存到localStorage中，这些数据将在页面加载时恢复。这对于防止用户的浏览器崩溃、标签页关闭或其他意外问题导致您的应用程序在用户提交数据之前重新加载时的数据丢失非常有用。

当表单 submit 被调用时，LocalStorage中的数据会自动清除。

安装

要在FormKit中使用这个插件，请安装 @formkit/addons：

yarn add @formkit/addons

安装完插件包后，您需要将插件注册到FormKit。createLocalStoragePlugin 有您可以配置的选项：

• prefix - 分配给您localStorage键的前缀。默认为 formkit。
• key - 一个可选的键，包含在localStorage键名中，用于将数据关联到特定用户。
• control - 您希望在表单中使用的一个可选字段名，当其值为 true 时启用保存到localStorage的功能。字段值必须是布尔值。
• maxAge - 保存的localStorage应被认为有效的时间（以毫秒为单位）。默认为1小时。
• debounce - 应用于保存数据到localStorage的防抖时间。默认为 200ms
• beforeSave：— 一个可选的异步回调，接收表单数据。允许在保存到localStorage之前修改表单数据。
• beforeLoad：— 一个可选的异步回调，接收表单数据。允许在将localStorage数据应用到表单之前进行修改。

// formkit.config.js
import { defaultConfig } from '@formkit/vue'
import { createLocalStoragePlugin } from '@formkit/addons'

const config = defaultConfig({
  plugins: [
    createLocalStoragePlugin({
      // 插件默认值：
      prefix: 'formkit',
      key: undefined,
      control: undefined,
      maxAge: 3600000, // 1小时
      debounce: 200,
      beforeSave: undefined,
      beforeLoad: undefined
    }),
  ],
})

export default config

使用

要启用保存到localStorage，请在您的FormKit form 中添加 use-local-storage 属性。localStorage键将是您提供的 prefix（默认为 formkit）和您的表单 name，例如 formkit-contact。

基本示例

就是这样！您的表单数据现在将在 form 接收到的每个 commit 事件时被保存。它将保持有效直到您在插件配置中设置的 maxAge，并且当目标表单上的 submit 事件触发时，localStorage中的数据将被清除。

在提交失败时恢复值

当用户提交表单时，与表单匹配的localStorage条目将被删除。在删除之前，localStorage条目的值会被存储在内存中，并且可以通过在提交处理程序中调用node.restoreCache()方法来恢复。这对于在提交过程中出现故障（例如服务器错误）时恢复用户输入的数据非常有用。

使用唯一键

如果你在多个用户可能共享同一设备的应用程序上下文中将数据保存到localStorage，你可以提供一个对用户唯一的key，那么每个用户将拥有自己的localStorage条目。

使用控件

你可以允许用户选择将其表单数据保存到localStorage，方法是提供一个返回boolean值的字段名称。当值为true时，数据将被保存。

使用数据修改

使用beforeSave和beforeLoad异步回调，你可以修改保存到localStorage的数据。如果你想运行某种混淆函数或将数据发送到后端进行加密，这会很有用。在这个例子中，我们通过对表单值进行base64编码来混淆数据。

请注意，在从localStorage加载数据时，直到我们的beforeLoad回调解决之前，表单将被禁用。