FormAutoSave

A lightweight, dependency-minimal JavaScript library for automatically saving and restoring form data using browser localStorage/sessionStorage. Never lose form data again due to accidental page refreshes, browser crashes, or navigation errors.

Features

• Automatic Saving - Saves form data as users type with configurable debouncing
• Smart Restore - Prompts users to restore previously saved data
• Data Comparison - Visual side-by-side comparison of saved vs. current data
• Multiple Forms - Supports multiple forms on a single page
• Security-Aware - Automatically excludes password fields and allows custom exclusions
• Auto-Expiration - Configurable data expiration (default: 7 days)
• Status Indicators - Visual feedback for save status
• Storage Options - Choose between localStorage or sessionStorage
• Silent Mode - Auto-restore without user prompts
• Highly Configurable - Extensive options for customization
• HTML5 Dialog - Modern native dialog elements
• Zero Dependencies - Pure vanilla JavaScript, no frameworks required

Demo

View Live Demo

Installation

Via NPM (when published)

npm install form-autosave

Via CDN (when published)

<scriptsrc="https://cdn.jsdelivr.net/npm/form-autosave@1.0.0/dist/formAutoSave.min.js"></script>

Manual Installation

1. Download formAutoSave.js
2. Include it in your HTML:

<scriptsrc="path/to/formAutoSave.js"></script>

Quick Start

Basic Usage

<!-- Add the class 'form-autosave' to your form --><formclass="form-autosave" id="contactForm"><inputtype="text" name="name" placeholder="Your name"><inputtype="email" name="email" placeholder="Your email"><textareaname="message"></textarea><buttontype="submit">Submit</button></form><!-- Include the script --><scriptsrc="formAutoSave.js"></script>

That's it! Your form will now automatically save and restore data.

Advanced Configuration

constformAutoSave=newFormAutoSave({// CSS selector for forms to auto-saveformSelector: '.form-autosave',// Optional: CSS selector for a global status elementstatusSelector: '#statusbar',// Prefix for localStorage keysstoragePrefix: 'form_autosave_',// Attribute to exclude specific fieldsexcludeAttribute: 'data-no-autosave',// Debounce delay in millisecondsdebounceDelay: 500,// Maximum age of saved data (in milliseconds)maxAge: 7*24*60*60*1000,// 7 days// Use sessionStorage instead of localStorageuseSessionStorage: false,// Auto-restore without promptinguseSilentMode: false,// Hide save status notificationshideNotifications: false,// CallbacksonSave: (formId,data)=>console.log('Form saved:',formId),onRestore: (formId,data)=>console.log('Form restored:',formId),onClear: (formId)=>console.log('Form cleared:',formId)});

Usage Examples

Excluding Specific Fields

<!-- Exclude sensitive fields from auto-save --><formclass="form-autosave"><inputtype="text" name="username"><!-- This field won't be saved --><inputtype="password" name="password" data-no-autosave><!-- This field won't be saved either --><inputtype="text" name="otp" data-no-autosave><buttontype="submit">Login</button></form>

Excluding Entire Forms

<!-- This form won't use auto-save --><formdata-no-autosave><inputtype="text" name="sensitive_data"><buttontype="submit">Submit</button></form>

Global Status Indicator

<!-- Status will be shown here instead of individual form indicators --><divid="statusbar"></div><formclass="form-autosave"><!-- form fields --></form><script>constformAutoSave=newFormAutoSave({statusSelector: '#statusbar'});</script>

Silent Mode (Auto-Restore)

// Automatically restore saved data without promptingconstformAutoSave=newFormAutoSave({useSilentMode: true,showNotifications: false});

API Reference

Configuration Options

Option	Type	Default	Description
formSelector	String	'.form-autosave'	CSS selector for forms to enable auto-save
statusSelector	String	null	CSS selector for global status element
storagePrefix	String	'form_autosave_'	Prefix for storage keys
excludeAttribute	String	'data-no-autosave'	Attribute to exclude fields/forms
debounceDelay	Number	500	Debounce delay in milliseconds
maxAge	Number	604800000	Max age of saved data (7 days default)
useSessionStorage	Boolean	false	Use sessionStorage instead of localStorage
useSilentMode	Boolean	false	Auto-restore without prompting
showNotifications	Boolean	true	Show save status indicators
onSave	Function	null	Callback when form is saved
onRestore	Function	null	Callback when form is restored
onClear	Function	null	Callback when form data is cleared

API Convention

Methods and properties prefixed with _ are private and should not be used directly. Only use the public API methods documented below.

Public Methods

getFormIdentifer(form)

Manually get the form identifier for a specific form.

formAutoSave.getFormIdentifier(form);

getStorageInfo()

Get information about storage usage.

constinfo=formAutoSave.getStorageInfo();console.log(info);// { formCount: 3, totalSize: 2048, totalSizeKB: '2.00' }

export(formId)

Export saved data for a specific form.

constdata=formAutoSave.export('contactForm');console.log(data);

import(formId, data)

Import data for a specific form.

formAutoSave.import('contactForm',savedData);

getForm(formId)

Manually get the form data for a specific form.

formAutoSave.getForm('contactForm');

saveForm(formId)

Manually trigger a save for a specific form.

formAutoSave.saveForm('contactForm');

saveAllForms()

Manually trigger a save for all forms.

formAutoSave.saveAllForms();

clearForm(formId)

Manually trigger a clear for a specific form.

formAutoSave.clearForm('contactForm');

clearAllForms()

Clear all saved form data from storage.

formAutoSave.clearAllForms();

Browser Support

• Chrome/Edge (latest)
• Firefox (latest)
• Safari (latest)
• Opera (latest)
• IE 11+ (with polyfills for Event constructor)

Security Considerations

• Password fields are automatically excluded
• File input fields are automatically excluded
• Use data-no-autosave attribute for sensitive fields
• Data is stored in browser's local storage (unencrypted)
• For sensitive applications, consider using sessionStorage instead
• Implement server-side validation - never trust client-side data

Performance

• Debouncing: Prevents excessive saves during rapid typing
• Minimal DOM manipulation: Efficient event handling
• Small footprint: ~15KB minified
• No polling: Event-driven architecture

Troubleshooting

Forms not saving

1. Ensure form has the correct class: class="form-autosave"
2. Check that form has an id, name, or action attribute
3. Check browser console for errors

Data not restoring

1. Check if data has expired (default: 7 days)
2. Verify storage isn't full
3. Ensure same domain/protocol (localStorage is origin-specific)
4. Check if useSilentMode is enabled

Browser compatibility issues

1. Test in different browsers
2. Check console for JavaScript errors
3. Ensure dependencies are properly loaded

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

Changelog

Version 1.0.0 (2026-04-22)

• Initial release
• Auto-save functionality
• Data comparison UI
• Silent mode
• Multiple form support
• Configurable expiration

License

This project is licensed under the MIT License - see the LICENSE file for details.

Author

David Herman

• GitHub: @daveherman71
• Website: https://github.com/daveherman71/FormAutoSave

Acknowledgments

• Built with assistance from GitHub Copilot (Claude Sonnet 4.5)
• Inspired by the need for better form data persistence
• FontAwesome for beautiful icon library (optional enhancement)
• HTML5 Dialog specification for native modal support
• Community feedback and contributions

Support

If you find this project useful, please consider:

• Starring the repository
• Reporting bugs
• Suggesting new features
• Improving documentation