FormStorage

Demo

Gender	Male Female
Name
Favorite Colors	Blue Red Yellow Black White
Save form data.

Quick start

Using CDN

You can easily start by using the CDN version.

Add the following description in the <head> tag of the web page you want to use FormStorage with.

<script src="https://unpkg.com/form-storage@latest/build/form-storage.min.js"></script>

You can also bundle the library with Browserify or Webpack.

npm install form-storage --save

import FormStorage from 'form-storage'

Wrap the elements you want to apply FormStorage to like this.

<form class="js-form-storage">
  <input type="text" name="first-name" />
  <input type="text" name="last-name" />
  <input type="email" name="email" />
  <input type="password" name="password" />
  <label>
    <input type="checkbox" class="js-persist" />
    Allow saving form-data to localstorage.
  </label>
</form>

Write the following script

new FormStorage('.js-scrollable', {
  name: 'form-storage', //localstorage name
  ignores: [ // The selectors specified here, won't be stored in the storage.
    '[type="password"]'
  ],
  checkbox: '.js-persist' //if the selector specified here is checked, the form data will be stored.
});

Options

Some options are available when making new instances.

var storage = new FormStorage('.js-scrollable', {
  name: 'form-storage', //localstorage name
  ignores: [ // The selectors specified here, won't be stored in the storage.
    '[type="password"]', '.js-ignore'
  ],
  checkbox: '.js-persist' //if the selector specified here is checked, the form data will be stored.
});

For your reference, below is a list of available options.

Name	Default	Description
`name`	'form'	localstorage name to be used
`ignores`	[]	Selectors which won't be saved to localstorage
`includes`	[]	When specified, only selectors specified here will be saved
`checkbox`	null	When this checkbox is checked, the form data will be saved before submitting and the form data will be restored when the page is loaded.

Methods

You can also use some methods from instances like below

var storage = new FormStorage('.js-scrollable', {
  name: 'form-storage', //localstorage name
  ignores: [ // The selectors specified here, won't be stored in the storage.
    '[type="password"]', '.js-ignore'
  ],
  checkbox: '.js-persist' //if the selector specified here is checked, the form data will be stored.
});
storage.save(); //using the method

Name	Description
save	Save the form data to localstorage
apply	Fill the form from the localstorage
clear	Remove data from localstorage

Join development on

GitHub

License