vue-persist

Persist data in localStorage or anywhere for Vue.js apps

Install

yarn add vue-persist

Usage

import VuePersist from 'vue-persist'

Vue.use(VuePersist)

new Vue({
  template: '<input v-model="name" />',

  data: { name: '' },

  persist: ['name']
})

Then the data of name will be stored at localStorage and kept in sync.

Check out the demo, just type some words and refresh the page.

You can also manually call this.$persist(['some-data']) instead of using the component option.

API

Vue.use(VuePersist, [options])

options

name

Type: string
Default: persist:store

The name of the localStorage store.

expiration

Type: number
Default: 0

Expire store in a specific amount of time (in millisecond), default to never expire.

read

Type: function
Default: k => localStorage.get(k)

The function we use to get stored data.

write

Type: function
Default: (k, v) => localStorage.set(k, v)

The function we use to store data.

clear

Type: function
Default: k => localStorage.removeItem(k)

The function we use to clear data in store.

this.$persist(keys[, name, expiration])

keys

Type: Array
Required: true

Array of keys of state you want to keep in sync with localStorage.

name

Type: string
Default: options.name

expiration

Type: number
Default: options.expiration

Contributing

1. Fork it!
2. Create your feature branch: git checkout -b my-new-feature
3. Commit your changes: git commit -am 'Add some feature'
4. Push to the branch: git push origin my-new-feature
5. Submit a pull request :D

Author

vue-persist © egoist, Released under the MIT License.
Authored and maintained by egoist with help from contributors (list).

egoistian.com · GitHub @egoist · Twitter @rem_rin_rin