Save Form Date Into HTML5 Web Storage – Form Saver

Preview:

Description:

Form Saver is a small (5kb) script that stores the current form data & state into HTML5 local storage to prevent data loss. You’re able to retrieve them when needed (refresh, re-visit, etc.).

How to use it:

Create a button to save the current form data into your browser’s local storage.

<button data-form-save="#form-id">
  Save Form Data
</button>

Insert the JavaScript file form-saver.js into your html document.

<script src="dist/js/form-saver.js"></script>

Initialize the Form Saver and done.

formSaver.init();

If you want a button to clear the stored data:

<button data-form-delete="#form-id">
  Delete Form Data
</button>

All default options and callback functions:

{
  selectorStatus: '[data-form-status]',
  selectorSave: '[data-form-save]',
  selectorDelete: '[data-form-delete]',
  selectorIgnore: '[data-form-no-save]',
  deleteClear: true,
  saveMessage: 'Saved!',
  deleteMessage: 'Deleted!',
  saveClass: '',
  deleteClass: '',
  initClass: 'js-form-saver',
  callbackSave: function () {},
  callbackDelete: function () {},
  callbackLoad: function () {}
}