Vue-refreshable NPM

Vue Refreshable

Persistant forms when you refresh.

Todo

Prevent collisions when switching pages.
~Do we really need to pass in the data object?~
Ability to omit fields.
Debounce storage.
~Don't store passwords.~
Somehow check the data is valid when restoring?
Encryption?
~Tests.~
~Linting (I disabled for now)~
Instead of relying on the data object, actually make it matter where you put the directive and get the data from the child inputs of the form. Since it doesn't matter where you put the directive currently.

Usage

Install the plugin globally.

npm i vue-refreshable --save-dev

import Vue from 'vue';
import Refreshable from 'vue-refreshable';

Vue.use(Refreshable);

Then use the directive v-refreshable on the form element you'd like to save, passing in the name of the key where the form values are as an argument.

<form v-refreshable:form></form>

Pass a valid modifier to only store elements that pass validation.

<form v-refreshable:form.valid></form>

data() {
    return {
        form: {
            name: '...',
            email: '...'
        }
    }
}

Options

Vue.use(Refreshable, {
    key: 'storage-key',  // Custom key localStorage will use.
    storage: Storage,    // Storage object to use internally.
    delay: 1000,         // Delay before saving state.
});