Save Form Date Into HTML5 Web Storage – Form Saver

Category: Form , Javascript | April 26, 2017
Views Total:278 views
Official Page:Go to website
Last Update:April 26, 2017


Save Form Date Into HTML5 Web Storage – Form Saver


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

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.


If you want a button to clear the stored data:

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

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 () {}


You Might Be Interested In:

Leave a Reply