Auto Save

You can tell Stages to auto save the added data. The data is either stored in local or session storage. On all reset actions, the saved data is removed.

You can enable it two ways. The basic way is to either set local or session like this (note that the form needs and id so the storage can define a correct key):

<Form
    id="demo"
    autoSave="local"
    ...
/>

Or if you want to config this option more precisely, you can do it like this:

<Form
    id="demo"
    autoSave={{
		type: "session",
		validDataOnly: false
	}}
    ...
/>

Options are:

• type: The storage type, either local or session or custom
• validDataOnly: Should only valid data be saved? (boolean)
• save: Optional callback, used if custom is set for the storage type
• get: Optional callback, used if custom is set for the storage type, has to return an object of the saved data
• remove: Optional callback, used if custom is set for the storage type

A custom auto save implementation could look like this:

<Form
    id="demo"
    autoSave={{
		type: "custom",
        validDataOnly: false,
        save: (id, data) => saveDataToStorage(id, data),
        get: (id) => getDataFromStorage(id),
        remove: (id) => removeDataFromStorage(id)
	}}
    ...
/>

For fields which should not be auto saved, like for example password fields, add the disableAutoSave to its config like this and its data wont be persisted:

{
    id: "password",
    label: "Password",
    type: "password",
    isRequired: true,
    disableAutoSave: true
},

Autosave is also available on the wizard component:

<Stages
    id="demo"
    autoSave={{
		type: "session",
		validDataOnly: false
	}}
    ...
>
    ...
</Stages>

Same options. Just make sure that you don't add autosave on the individual Form components used for the wizard steps.

Related Demo