vue-auto-storage

An automatic storage plugin for Vue2, persist the data with localStorage.

Demo

Try it out

Requirements

Vue.js 2.x
IE9 +

Advantages

Simple API.
Small bundle size: 3.77KB (1.39KB gzipped).
No dependencies.

Attention

Obey the following:

Vue component must has a unique name field.
The target component can't used multiple times, eg: not used by v-for.

Installation

yarn add vue-auto-storage

Usage

Registration

main.js

import Vue from "vue";
import App from "./App.vue";
import AutoStorage from "vue-auto-storage";

Vue.use(AutoStorage);

// or with options

// Vue.use(AutoStorage, { debounce: 100 });

new Vue({
  render: h => h(App)
}).$mount("#app");

Example

Add autoStorage filed to Vue component's options object, declare the keypath of data you want to persist.

export default {
  name: "ComponentName",

  autoStorage: ["a.b", "c.0.d", "f"],

  data() {
    return {
      a: { b: "" },

      c: [{ d: "" }, { e: "" }],

      f: ""
    };
  },

  created() {}
};

~~If you want persist an array's first item, use array.0 instead of array[0], why?~~

Methods

Function	Description	Parameters Type	Example
clear(key)	Clear storage. If no parameters, clear all AutoStorage cache.	`String`, `N/A`	`this.$autoStorage.clear("a.b")`

Plugin Configurations

Property	Description	Type	Default
debounce	Debounce time of watchers, unit: `ms`.	`Number`	300
storage	Any object following the Storage protocol.	`Object` more	`localStorage`

Stay tuned for more configurations.

Development

yarn dev

Build

yarn build:lib

Test

yarn test

Todo Features

Support Vuex.

niej520/vue-auto-storage