Vue Refreshable

Persistant forms when you refresh.

Todo

• [ ] Prevent collisions when switching pages.
• [x] ~Do we really need to pass in the data object?~
• [ ] Ability to omit fields.
• [ ] Debounce storage.
• [x] ~Don't store passwords.~
• [ ] Somehow check the data is valid when restoring?
• [ ] Encryption?
• [x] ~Tests.~
• [x] ~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.
});

Running the example

From the /example directory.

npm install

npm run serve

Development

Install dependencies first

npm i

Running tests

npm run test

Building the module

npm run build

Auto-build on file changes

npm run build:watch