Author: | FThompson |
---|---|
Views Total: | 329 views |
Official Page: | Go to website |
Last Update: | February 2, 2020 |
License: | MIT |
Preview:

Description:
The FormPersistence.js JavaScript library automatically stores the current form state to web storage that supports both localStorage and sessionStorage persistence.
How to use it:
Download and import the FormPersistence.js into the document.
# NPM $ npm install form-persistence --save
<script src='form-persistence.js'></script>
Attach the FormPersistence.js to the target HTML form. This will automatically store the form data in the localStorage on form submit.
window.addEventListener('load', () => { let form = document.getElementById('myForm') FormPersistence.persist(form); })
All possible options for the persist
method.
FormPersistence.persist(form,{ // custom storage key // default: Form ID uuid: null, // true = use local storage instead useSessionStorage: false, // saves data on submit saveOnSubmit: false, // skips form elements defined outside of the form hierarchy skipExternal: false, // custom value handling functions valueFunctions: null, // Define a whitelist filter function that inputs an element and outputs a boolean. includeFilter: element => element.type === 'hidden', // Define a blacklist filter function that inputs an element and outputs a boolean. excludeFilter: element => element.type === 'hidden', });
Store the form data using localStorage (default).
FormPersistence.save(form)
All possible options for the save
method.
FormPersistence.save(form,{ // custom storage key // default: Form ID uuid: null, // true = use local storage instead useSessionStorage: false, // skips form elements defined outside of the form hierarchy skipExternal: false });
Restore the form data on the next visit.
FormPersistence.load(form)
All possible options for the load
method.
FormPersistence.load(form,{ // custom storage key // default: Form ID uuid: null, // true = use local storage instead useSessionStorage: false, // skips form elements defined outside of the form hierarchy skipExternal: false, // custom value handling functions valueFunctions: null });
Clear the saved form data.
FormPersistence.clearStorage(form,{ // custom storage key // default: Form ID uuid: null, // true = use local storage instead useSessionStorage: false })
Store forms in locations other than web storage.
FormPersistence.serialize(form,{ // skips form elements defined outside of the form hierarchy skipExternal: false, // custom value handling functions valueFunctions: null }) FormPersistence.deserialize(form, data, { // skips form elements defined outside of the form hierarchy skipExternal: false, // custom value handling functions valueFunctions: null })
Changelog:
v2.0.6 (02/02/2020)
- Added includeFilter and excludeFilter options
v2.0.5 (12/16/2019)
- Fixed an issue where checkbox arrays were not serialized correctly
v2.0.4 (08/02/2019)
- Minor fix for Babel 7 compilation
v2.0.2 (07/13/2019)
- Fixed bug where name-less inputs were being serialized
v2.0.1 (07/06/2019)
- Use form.elements instead of custom form element getter. This change simplifies the code and may improve performance by avoiding DOM queries.
v2.0.0 (07/04/2019)
- Support id-less forms, IE, Edge<18, skipExternal and uuid options
v1.0.3 (06/25/2019)
- Available in NPM.
v1.0.2 (06/25/2019)
- Fixed event detection bug on iOS Safari
04/09/2019
- Adding FormPersistence.serialize and FormPersistence.unserialize will allow users to store forms in locations other than web storage.