jQuery Plugin to Save Form Fields Values To localStorage - phoenix

jQuery Plugin to Save Form Fields Values To localStorage - phoenix
File Size: 12.5 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Phoenix is a human-friendly jQuery form plugin that makes use of HTML5 Web Storage API to save form values your users input into local storage and restore the data when needed. The plugin can help your users prevent from losing data when accidentally closing the window, clicking the back button, lost connection, etc.

You might also like:

How to use it:

1. Include the latest jQuery javascript library and jQuery phoenix plugin in the page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="jquery.phoenix.js" type="text/javascript"></script>

2. Create form input fields with a specified class selector.

<form id="login-form">
<label for="first-input">Input</label>
<input class="demo" id="first-input" name="input1" type="text" value="First form field" />
</form>

3. Call the plugin and you're done. The plugin will do the rest.

$('.demo').phoenix()

4. Available settings.

$('.demo').phoenix({

// localStorage namespace
namespace: "phoenixStorage",

// sessionStorage or localStorage
webStorage: "localStorage",

//  max items to store 
maxItems: 100, 

// how often to save field values to localStorage
saveInterval: 1000, 

// form selector 
// when you submit this form Phoenix will clean up stored items
clearOnSubmit: false, 

saveOnChange: false,

// define which element attributes will be used to find the correct element to populate
keyAttributes: ["tagName", "id", "name"] 
})

5. Methods.

// start saving timer, it will save field values every saveIntervalms
$(selector).phoenix('start')

// stop saving timer
$(selector).phoenix('stop')

// load value from stored item to field
$(selector).phoenix('load')

// save value from field to stored item
$(selector).phoenix('save')

// stop saving timer and remove stored item from localStorage
$(selector).phoenix('remove')

6. Events.

/* phnx.started
   phnx.stopped
   phnx.loaded
   phnx.saved
   phnx.removed
*/
$('selector').bind('phnx.loaded', function (e) {
  console.log('Data loaded... ')
})

Change logs:

2015-05-21

2015-05-12

  • update to 1.2.2

2014-07-21

  • update to 1.2.1

2014-07-12

  • Add option to change storageKey attributes

This awesome jQuery plugin is developed by kugaevsky. For more Advanced Usages, please check the demo page or visit the official website.