form-states-storage-plugin

一个轻量级的表单数据存储插件，支持将表单数据持久化到 localStorage 中，方便在页面刷新或关闭后恢复表单数据。支持多标签页间的数据同步。

🚀 特性

• 自动保存表单数据到 localStorage
• 支持多种表单元素（input, textarea, select 等）
• 多标签页间数据同步
• 自动保存机制（页面关闭或隐藏时自动保存）
• 简单易用的 API
• 支持现代浏览器和 Node.js 环境
• 支持 ESM 和 CommonJS 模块格式

📦 安装

npm install form-states-storage-plugin

📖 使用方法

ESM 方式引入

import FormStorage from "form-states-storage-plugin";

// 创建表单存储实例
const formStorage = new FormStorage("myForm", { value: {} });

// 初始化加载数据
formStorage.init();

// 手动保存数据
formStorage.saveData();

// 手动清除数据
formStorage.clearData();

// 清除所有表单数据
FormStorage.clearAll();

CommonJS 方式引入

const FormStorage = require("form-states-storage-plugin").default;

// 创建表单存储实例
const formStorage = new FormStorage("myForm", { value: {} });

// 初始化加载数据
formStorage.init();

// 手动保存数据
formStorage.saveData();

// 手动清除数据
formStorage.clearData();

// 清除所有表单数据
FormStorage.clearAll();

🛠️ API

FormStorage 构造函数

new FormStorage(formId, formData);

• formId: 表单唯一标识符
• formData: 包含表单数据的对象，通常为 { value: {} } 格式

init()

初始化表单存储，加载本地存储的数据到表单

saveData()

手动保存表单数据到 localStorage

clearData()

清除当前表单在 localStorage 中的数据

FormStorage.clearAll()

清除所有以 formData_ 为前缀的本地存储数据

🧪 浏览器兼容性

• Chrome 50+
• Firefox 45+
• Safari 10+
• Edge 15+

📄 许可证

ISC

👤 作者

quinnyannick