使用原生 JavaScript 实现，旨在支持表单缓存功能，能够无缝集成到 Vue、React 等前端框架中。此方案还具备多标签页同步表单数据的能力，同步逻辑经过防抖处理，并确保在切换或关闭标签页时能立即同步内容。

API

• saveDataToStorage 立即同步数据到 storage
• saveData 立即同步数据到 storage
• debouncedSaveData 防抖处理同步数据到 storage
• loadData 将 storage 的数据同步到表单对象
• clearData 清除当前实例缓存数据
• clearAll 清除所有实例的缓存数据

vue hook 封装

react hook 封装

import { useEffect, useRef } from 'react';
import FormStorage from 'web-form-storage';

/**
 * 这是一个用于存储表单的钩子。它使用localStorage和BroadcastChannel来同步不同标签页之间的表单数据，并防止数据丢失。
 *
 * @param {String} formId - 表单的唯一标识符。
 * @param {Object} formData - 需要被存储的表单数据。
 * @param {Function} setFormData - 设置表单数据的函数。
 * @return {Object} 返回一个FormStorage实例，该实例包含了表单数据、保存数据的方法以及清除数据的方法等。
 */
const useFormStorage = (formId, formData, setFormData) => {
  // 创建一个持久化的 FormStorage 实例
  // new FormStorage(formId, { value: formData })
  const formStorage = useRef(new FormStorage(formId, formData)).current


  useEffect(() => {
    // 初始化formStorage数据
    formStorage.init();
    // 设置表单数据
    // setFormData({ ...formStorage.formData.value });
    setFormData({ ...formStorage.formData })

    const syncFormData = (event) => {
      if (event.key === formStorage.storageKey && event.newValue) {
        setFormData(JSON.parse(event.newValue))
      }
    }
    // 添加一个 storage 事件监听器，当本地存储中的表单数据发生变化时，更新组件状态。
    window.addEventListener('storage', syncFormData)
    // 返回一个清理函数，移除事件监听器。
    return () => {
      window.removeEventListener('storage', syncFormData)
    }
  }, [formStorage, setFormData])


  // 保存表单数据。每当 formData 变化时，更新 formStorage 中的数据并调用防抖后的 debouncedSaveData 方法保存数据。
  useEffect(() => {
    formStorage.formData = formData;
    formStorage.debouncedSaveData();
  }, [formStorage, formData])

  // 返回 formStorage 实例，以便在其他地方可以访问或操作它。
  return formStorage;
}

export default useFormStorage;