Persist Form State To Web Storage On Submit – FormPersistence.js

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.