FormStorage

A JavaScript library stores the form-data to the localstorage so you don't have to fill the form again.

Download GitHub

Demo

Sex
Name
Favorite Colors

Quick start

Using CDN

You can easily start by using CDN.

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

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

You can also bundle the library with Browserify/Webpack

npm install form-storage --save
import FormStorage from 'form-storage'

Wrap the elements you want to apply ScrollSuggest like below

<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 to store the form-data to the 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 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.
});

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

Name Default Description
name 'form' localstorage name to be used
ignores [] Selectors which won't be saved on the storage
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 the 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 on the localstorage
apply Fill the form from the localstorage
clear Remove the localstorage

Join development on