Save form data to local storage with Phoenix or Sisyphus jQuery plugins

Sometimes it’s very desired for web application, to have a possibility of saving the forms state, that can be pre-loaded later, after refresh, etc.

Save form data to local storage with jQuery plugins

Here we have a two plugins, whose job is to save form data to local storage.

1. Phoenix – is user-friendly jQuery form plugin, that gets HTML5 Web Storage API to cooperate in an easy way, to reach desired effects with a couple lines of code. It puts form fields values to the storage. We can keep the items safely, using prefixes for particular pages or forms.

Phoenix is a stable jQuery plugin that saves data entered inside form fields locally and restores it in case the browser crashes or the page is refreshed accidentally.

Phoenix jQuery plugin - a good way to save form data to local storage!
Phoenix jQuery plugin – a good way to save form data to local storage!

Usage

1. We need to include jQuery and jquery.phoenix plugin

2. Let’s create our HTML form

3. Now we can start the magic:

$('input').phoenix();

To clear storage on successful form submission, just run the:

$('input').phoenix('remove');

We can apply the plugin for the inputs, particular or all the forms of the web app. We can also select inputs by the class.

Sample HTML:

<form id='stored-form'>
  <input type="text" class="phoenix-input" />
  <textarea type="text" class="phoenix-input"></textarea>
</div>

JS:

$('.phoenix-input').phoenix()
$('#my-form').submit(function(e){
  $('.phoenix-input').phoenix('remove')
});

Options:

$('.phoenix-input').phoenix({
 namespace: 'phoenixStorage',
 webStorage: 'sessionStorage',
 maxItems: 100,
 saveInterval: 1000,
 clearOnSubmit: '#stored-form',
 keyAttributes: ['tagName', 'id']
});

Methods:

Phoenix brings API methods to manage the data:

start – start saving timer

stop – stop saving timer

load – load value from stored item to field

save – save value from field to stored item

remove – stop saving timer and remove stored item from localStorage

Events:

Every Phoenix method call fires an event we can bind to. For example:

$('.phoenix-input').bind('phnx.loaded', function (e) {
  console.log('Data loaded... ')
});

The events are:

– phnx.started

– phnx.stopped

– phnx.loaded

– phnx.saved

– phnx.removed

License: MIT

Demo:

http://kugaevsky.github.io/jquery-phoenix

Get the plugin from GitHub:

https://github.com/kugaevsky/jquery-phoenix

2. Sisyphus is another, similar solution. The plugin developed to save HTML forms data to Local Storage to restore them after browser crashes, tabs closings and other disasters.

Description and sample are available here:

http://sisyphus-js.herokuapp.com

License: MIT

See also a related article:

http://coding.smashingmagazine.com/2011/12/05/sisyphus-js-client-side-drafts-and-more

Get the “save form data to localstorage” plugin from GitHub:

https://github.com/simsalabim/sisyphus

You may also like:

DOM Storage – JavaScript Web Storage

Web storage tutorial – applications that store data locally

Multi-step jQuery form wizard plugin – jquery.steps

Smart Wizard – a jQuery form wizard plugin

A good jQuery text counter plugin

Ideal Forms 3: build and validate responsive HTML5 forms!

Fancy sliding form jQuery

Enjoy!

Share:Share on Facebook1Share on Google+1Tweet about this on TwitterShare on LinkedIn3Pin on Pinterest1