# web-form-storage

**Repository Path**: Landon100100/web-form-storage

## Basic Information

- **Project Name**: web-form-storage
- **Description**: 使用原生 JavaScript 实现，旨在支持表单缓存功能，能够无缝集成到 Vue、React 等前端框架中。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-12-23
- **Last Updated**: 2024-12-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

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

## API

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

## vue hook 封装

## react hook 封装
```jsx
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;
```