Save Form Changes In Local Storage – form-storage

Preview:

Description:

form-storage is a small JavaScript library to store the current values of your form fields in the local storage to prevent data loss.

The saved values will be automatically restored any time when needed such as refresh, next visit, etc.

See also:

• Save Form Date Into HTML5 Web Storage – Form Saver

How to use it:

Install the form-storage via package managers:

# Yarn
$ yarn add form-storage

# NPM
$ npm install form-storage --save

Import the library as a module.

// ES 6
import FormStorage from 'form-storage';

Or directly include the JavaScript file ‘form-storage.js’ on the webpage.

<script src="form-storage.js"></script>

Apply the form-storage to your HTML form.

var formStorage = new FormStorage('.js-form');
formStorage.apply();

Save the current form status in the local storage.

formStorage.save();

You can specify an array of form fields to include or exclude.

var formStorage = new FormStorage('.js-form',{
    ignores: [],
    includes: [],
});

Create a checkbox to save data before submitting.

<label>
  <input type="checkbox" class="js-persist" />
  Allow saving form-data to localstorage.
</label>

var formStorage = new FormStorage('.js-form',{
    checkbox: '.js-persist'
});

Customize the localstorage name.

var formStorage = new FormStorage('.js-form',{
    name: 'form-storage'
});

Clear the stored data.

formStorage.clear();

Changelog:

v1.3.5 (11/09/2020)

• Updated

v1.3.3 (11/12/2019)

• Fixed for IE

01/14/2018

• added getState and applyState medhod