LocalStorage 插件

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

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

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

安装

要安装 localStorage 插件，我们需要：

1. 从 @formkit/addons 中导入它。
2. 将其作为插件添加到我们的 FormKit 配置中。
3. 在目标表单上添加 use-local-storage 属性。

createLocalStoragePlugin 有一些可配置的选项：

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

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

const config = defaultConfig({
  plugins: [
    createLocalStoragePlugin({
      // plugin defaults:
      prefix: 'formkit',
      key: undefined,
      control: undefined,
      maxAge: 3600000, // 1 hour
      debounce: 200,
      beforeSave: undefined,
      beforeLoad: undefined
    }),
  ],
})

export default config

使用方法

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

基本示例

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

在提交失败时恢复值

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

使用唯一键

如果您正在将数据保存到 localStorage 中，并且多个用户可能共享同一设备，则可以提供一个对用户唯一的 key，然后每个用户将拥有自己的 localStorage 条目。

使用控制字段

您可以允许用户选择将其表单数据保存到 localStorage，只需提供返回布尔值的字段的名称。当值为 true 时，将保存值。

使用数据修改

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

请注意，当从 localStorage 加载数据时，表单将被禁用，直到我们的 beforeLoad 回调函数解析完成。