jQuery Plugin to Save Form Fields Values To localStorage - phoenix

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:

• Automatically Persist Text Field Values Locally - Garlic
• jQuery Plugin to Restore User Previously Entered Values - Remember State
• jQuery Plugin To Autosave Form Content - autoSave
• jQuery Plugin For Auto Saving Form Values

How to use it:

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

<script src="jquery.min.js"></script>
<script src="jquery.phoenix.js"></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... ')
})

Changelog:

2015-05-21

• update to 1.2.3

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.