jQuery Plugin to Save Form Fields Values To localStorage - phoenix

File Size: 12.5 KB
Views Total: 7696
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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:

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" />

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


4. Available settings.


// 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

// stop saving timer

// load value from stored item to field

// save value from field to stored item

// stop saving timer and remove stored item from localStorage

6. Events.

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




  • update to 1.2.2


  • update to 1.2.1


  • 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.