FormStorage

A JavaScript library that stores form data in localstorage so you don't have to fill it out again.

Download GitHub

Demo

Gender
Name
Favorite Colors

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