Form Saver

FS (Form Saver) is made to save your users time while filling short or long forms. It uses localStorage (by default) to register locally datas given by the user while completing your page forms. In case of browser crash, the script re-fill forms (automatically or by asking to user depending on you settings, again) to avoid user frustration.

How to use it

To start

First of all, you need to get the src folder content. Choose your own way to do so (clone this repository, download it manually, choose a dependencies manager, etc.)

Then link the script to your document, the one with a form to save, putting those lines of code before the </body> tag.

<script src="/assets/src/form-saver.min.js"></script>
	const fs = new FormSaver( 'myform' );

Replace /assets/src/ by the right folder, and remove .min from the file name if you need to test things in development. Keep .min to get the minified version which is better for performance.

myform is the id or name attribute value of the form you need to declare before initiating the script.

Optional arguments

const fs = new FormSaver( 'myform', {
	storageType     : 'local',
	storageID       : 'ID123',
	storageDuration : 30, // not supported yet.
} );

Multiple forms to save

In case you need to save multiple form, or have a generic way to declare FormSaver on complexe forms (yeah remember not to use FormSaver on small forms, it’s really not necessary), this is an example of code.

<script src="/assets/src/form-saver.min.js"></script>
	const fs = new FormSaver( 'myform' );

API / Methods

Forms Good Practices

Security concern

Some fields/datas should never be saved to avoid security issues. I have in mind:

To prevent those fields from being automatically saved, you can use different tricks:

In case you have a doubt about the sensitivity of a data, just use data-fs-save="false" on that input.

Form name/ID

A form should always be distinguishable thanks to a uniq identifier: id attribute or name attribute are the keys to make FS work. You need to fill one of them.

Keep the user in mind

Filling forms fields with user datas is kind of creepy when you think of that. Of course you can’t access those datas, but the user is not supposed to know that. That’s why FS propose by default a little message informing user when the page with the form is opening again with datas stored. The user have the possibility to use saved datas, or to use a new blank form.

From the outside, as developer, you have access to methods to make the User Experience even better. For example, you could suggest to the users to choose if they want their datas being saved or not at the beginning. stop, pause and destroy method will help you.

Specific behaviours

This script has some basic “automatic” behaviours you should know.

name and id attributes

As you should know, name and id attributes should always be provided for each input, select, textarea or whatever-form element you use.

Example if you want to get the value of a field in that form (that would be already saved):

<form id="my-form">
		<label for="name">Name</label>
		<input type="text" id="name" name="the-name" value="">
		<span class="label-like" id="color-label">Colors:</span>

		<input type="checkbox" value="Red" name="colors" id="color-red" aria-labelledby="color-label">
		<label for="color-red">Red</label>

		<input type="checkbox" value="Green" name="colors" id="color-green" aria-labelledby="color-label">
		<label for="color-green">Green</label>

		<input type="checkbox" value="Blue" name="colors" id="color-blue" aria-labelledby="color-label">
		<label for="color-blue">Blue</label>

You’ll need to do that in JS for the name:

let name_value = window.localStorage.getItem( 'my-form-name' );
console.log( name_value ); // (string) the value of the field.

For the same input, if you don’t provide id, just replace name by the-name.

To get the checkboxes value(s), use:

let checks = window.localStorage.getItem( 'my-form-colors' );
console.log( checks ); (array) the list of id(s) of checked checkbox(es).


Don’t forget this script is an helper to save user time. If saving datas is a big challenge for you business, you should save them on your server and not locally on the user computer.


On iOS since 5.1, Safari Mobile store localStorage datas in the cache directory which can be cleaned by the OS when memory space in full.

Work In Progress

Next versions will be release with those future support.

Select multiple

Select with attribute multiple is not tested and a priori not supported yet.

storageDuration parameter

It’s in the source code, but this parameter has no effect yet.

Information messages

A bunch of messages to:

Offline support

Detect during the process if the user is still online or offline. If not add the possibility to display a warning message. If they try to submit the form, tell them their data is saved in their browser and the form will be send again when online. (don’t close the tab!)

Browser Support

This is an estimated table of browser support:

Chrome Firefox Edge Opera Safari IE
41 44 12 17 10 11


Android Webview Chrome Android Edge Firefox Android Opera Android iOS Safari
41 41 12 44 17 10

Humans behind the code