Client Side Form Persistence

Application Servers considered obsolete

With HTML5 a purely client side state named local storage was introduced. This behaves like a session cookie. It is however

  1. not transmitted to the server,
  2. can store larger amounts of data and
  3. works on a by tab basis.

The last point is a real improvement when using local storage for view state.

Usage

The formPersistence.js library implements generic form persistence using local storage. It uses unobtrusive javascript and only requires you to do 3 things.

  1. Add a script tag that loads formPersistence.js,
  2. name the forms you want to persist with a unique name using the persist:name attribute and
  3. mark the fields you do not want to persist with persist:ignore.

Note that all fields with a name persist by default once a form is named for persistence. This includes password fields. Be aware that local storage may be stored on disk and mark sensitive fields with persist:ignore.

Be also aware that this currently is a proof of concept implementation and has not been sufficiently tested. The tested browsers are Firefox 3.5, Firefox 11 and Chrome 22.

Requirements

The formPersistence.js library requires the HTML5 sessionStorage object and JSON support.

Form Persistence Test

Fill the forms below with nonsense and press "Submit" to test form persistence.

First Form

Show stored Dump form




Second Form

Show stored Dump form



Single Select
Multiple Select

Radio Buttons One
Two
Three
Same Name One
Two
Three
Check Boxes One
Two
Three