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.

<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)
})

Store the form data using localStorage (default) or sessionStorage.

// default
FormPersistence.save(form)

// use sessionStorage
FormPersistence.save(form, useSessionStorage)

Restore the form data on the next visit.

// default
FormPersistence.load(form)

// use sessionStorage
FormPersistence.load(form, useSessionStorage)

Clear the saved form data.

// default
FormPersistence.clearStorage(form)

// use sessionStorage
FormPersistence.clearStorage(form, useSessionStorage)

Store forms in locations other than web storage.

FormPersistence.serialize(form)
FormPersistence.deserialize(form, data[, valueFunctions])

Changelog:

04/09/2019

• Adding FormPersistence.serialize and FormPersistence.unserialize will allow users to store forms in locations other than web storage.