Skip to content
Vue and Vuex plugin to persistence data with localStorage/sessionStorage
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src update deps Dec 13, 2018
test update deps Dec 13, 2018
types
.editorconfig update docs Apr 22, 2018
.eslintignore fix build Mar 15, 2018
.gitattributes format & add badge Mar 20, 2018
.gitignore test 2.2.4 on unpkg Mar 24, 2018
.npmignore test 2.2.4 on unpkg Mar 24, 2018
.prettierrc format & add badge Mar 20, 2018
.travis.yml Update to node 10 in .travis.yml May 3, 2018
LICENSE Create LICENSE Oct 4, 2017
README.md
bili.config.js update deps Dec 13, 2018
example.html update types,readme,example Jul 6, 2018
karma.conf.js fix karma coverage config Mar 21, 2018
package.json chore(package): update karma-typescript to version 4.0.0 Feb 4, 2019
tsconfig.json update deps Dec 13, 2018
yarn.lock chore(package): update lockfile yarn.lock Feb 4, 2019

README.md

vuejs-storage

vue.js and vuex plugin to persistence data with localStorage/sessionStorage

npm Travis codecov FOSSA Status

Purpose

This plugin provide a simple binding with localStorage and sessionStorage (or someing similar) to Vue and Vuex.

It has no dependencies, so it is really small.

  • .js size: 5.75KB (1.7KB gzipped)
  • .min.js size: 2.21KB (1.1KB gzipped)

Usage

//in webpack environment:
import vuejsStorage from 'vuejs-storage'
//in browser script tag:
const vuejsStorage = window.vuejsStorage

Vue.use(vuejsStorage)

//vue example
new Vue({
  //...
  data: {
    count: 0,
    text: ''
  },
  storage: {
    keys: ['count'],
    //keep data.count in localStorage
    namespace: 'my-namespace'
  }
})

//vuex example
const store = new Vuex.Store({
  //state...
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  },
  plugins: [
    vuejsStorage({
      keys: ['count'],
      //keep state.count in localStorage
      namespace: 'my-namespace',
      driver: vuejsStorage.drivers.sessionStorage
      //if you want to use sessionStorage instead of localStorage
    })
  ]
})

Nested key

data: {
  a: {
    b: 1,
    c: 2
  }
},
storage: {
  namespace: 'test',
  keys: ['a.b']
  //only keep a.b in localStorage
}

Vuex modules

state: {
  a: 1
},
modules: {
  moduleA: {
    state: {
      a: 2
    }
  }
},
plugins: [
  vuejsStorage({
    namespace: 'test',
    keys: ['moduleA','a']
    // keep both root's state.a & moduleA's state
  })
]

Multiple storage

data: {
  a: 1,
  b: 2
},
storage: [
  {
    namespace: 'test',
    keys: ['a']
  },
  {
    namespace: 'test',
    keys: ['b'],
    driver: vuejsStorage.drivers.sessionStorage
  }
]

API

vuejsStorage

Vue plugin

Vue.use(vuejsStorage)

vuejsStorage(option)

Create a Vuex plugin

const vuexplugin = vuejsStorage(/* option object*/)

option

Option object, can be used when create Vuex plugin or in Vue option storage field

{
  keys: [], //array of string
  /*
  this option is different when use in vue and vuex
  when used in Vue constructor option, keys means which data should be keep in localStorage
  when used in Vuex plugin, keys mean which state should be keep in localStorage
  */
  driver: vuejsStorage.drivers.sessionStorage, //any object has 'set','get','has' api, default: vuejsStorage.drivers.localStorage
  namespace: 'ns', //a string, REQUIRED
  merge: _assign //a function to merge object like Object.assign, default: internal implementation(src/assign.ts)
}

Examples

License

FOSSA Status

You can’t perform that action at this time.