Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 1,000,000+ packages pre-installed, including vuejs-storage with all npm packages installed. Try it out:

var vuejsStorage = require("vuejs-storage")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

vuejs-storage v3.1.0

Vue.js and Vuex plugin to persistence data with localStorage/sessionStorage

vuejs-storage

Vue.js and Vuex plugin to persistence data with localStorage/sessionStorage

npm npm GitHub Workflow Status codecov

Purpose

This plugin provide a simple binding with localStorage and sessionStorage (or something 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

Metadata

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free