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.86KB (1.42KB 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() {},
};

Use in TypeScript:

import { Component, Vue } from "vue-property-decorator";

@Component({
  autoStorage: ["a.b", "c.0.d", "f"],
})
export default class MyComponent extends Vue {
  private a = { b: "" };
  private c = [{ d: "" }, { e: "" }];
  private f = "";
}

~~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.

zh-rocco / vue-auto-storage

readme