Browser Storage Based Form Caching Plugin With jQuery - Form Prefill

Browser Storage Based Form Caching Plugin With jQuery - Form Prefill
File Size: 17.9 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Form Prefill is a jQuery form caching plugin that saves all data of form fields to the Browser Cookie or Session Storage and restores them as needed (e.g. when the browser is refreshed).

For IE users,you might need to load a Promise polyfill in the document.

Licensed under the GNU Lesser General Public License v3.0.

How to use it:

1. Define the unique key values for each form fields using name and data-form-prefill-keys attributes as displayed below:

<input type="text" data-form-prefill-keys="input_name">
<input checked value="One" data-form-prefill-keys="checkbox_name" type="checkbox">
<select multiple name="myform[personal_data][age]">
  <option value="1">one</option>
  <option value="2">two</option>
  <option value="3">three</option>
</select>

2. Put jQuery library and the JavaScript file jquery.formprefill.js at the end of the document.

<script src="//code.jquery.com/jquery-3.2.0.min.js"></script>
<script src="jquery.formprefill.js"></script>

3. Call the function on the html form to active the form caching plugin.

$('form').formPrefill();

4. Clear the cached data:

$('form').data('formPrefill').removeAll();

5. Available plugin options with default values.

$('form').formPrefill({
  prefix: 'formPrefill',
  storageKeys: function() {
    return {
      read: "key",
      write: "key"
    };
  },
  map: {},
  exclude: '[data-form-prefill-exclude]',
  include: '[data-form-prefill-include]',
  stringPrefix: 's',
  listPrefix: 'l',
  stores: [],
  useSessionStore: true,
  useCookies: false,
  cookieDomain: ''
});

Changelog:

2019-09-10

  • Guard against 3rd party storage protection exception.

2018-09-06

  • Always set secure cookies (require SSL/HTTPS)

2017-08-09

  • v0.10.0

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