jQuery Plugin To Cache/Preserve Form Values Using Html5 Web Storage - Form Cache

Form Cache is a jQuery plugin to improve the form usability that automatically caches/preserves form values using either Html5 localStorage or sessionStorage. So that if the visitors refresh the page or navigate away and return, the form values will be auto restored.

How to use it:

1. Include the latest jQuery library and the jQuery form cache plugin in the document.

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="formcache.js"></script>

2. Call the plugin on your existing From element and done.

$("#form").formcache()

3. Available options to config the plugin.

// A special identification for the form cache
// Must be different to other forms in the same page.
key: "",

// Store cache in localStorage
local: true,

// Store cache in sessionStorage
session: true,

// Update and store the cache automatically 
// when a form control changed or before page unload.
autoStore: true,

// set the stored time (in seconds) of the caches, 
// just like the max-age for cookie.
maxAge: undefined,

// The form controls which need to be cached.
controls: [
  "select",
  "textarea",
  "input"
  // "input[type='text']",
  // "input[type='password']",
  // "input[type='datetime']",
  // "input[type='checkbox']",
  // "input[type='radio']",
  // "input[type='datetime-local']",
  // "input[type='date']",
  // "input[type='month']",
  // "input[type='time']",
  // "input[type='week']",
  // "input[type='number']",
  // "input[type='email']",
  // "input[type='url']",
  // "input[type='search']",
  // "input[type='tel']",
  // "input[type='color']"
]

4. Public methods.

// Get the default cache object or a special one: 
$("#form").formcache("getCache", 1)
$("#form").formcache("getCache")

// Override the default cache object or add a new one.
$("form").formcache("setCache", {})
$("form").formcache("setCache", 1, {})

// Override the old caches with new caches.
$("form").formcache("setCaches", [{}])
$("form").formcache("setCaches", [{}, {}])

// Remove the default cache object or a special one.
$("form").formcache("removeCache")
$("form").formcache("removeCache", 1)

// Remove all cache objects.
$("form").formcache("removeCaches")

// Output the default cache object or a special one to the form.
$("form").formcache("outputCache")
$("form").formcache("outputCache", 1)

// Store all caches to sessionStorage or localStorage.
$("form").formcache("store")

// Clear all caches.
$("form").formcache("clear")

// Destroy the formcache instance, but keep the caches.
$("form").formcache("destroy")

// Serialize the form and return a cache object.
var cache = $('form').formcache('serialize');

Change logs:

v0.0.3 (2014-12-17)

• Add new options: "autoStore", "maxAge".
• Add new method: "serialize".

v0.0.2 (2014-12-14)

• Turns to use single quotation marks.
• Ignores file inputs

---

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