Wondering what’s next for npm?Check out our public roadmap! »

    @lucianodltec/vuejs-storage
    TypeScript icon, indicating that this package has built-in type declarations

    3.1.2 • Public • Published

    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

    Install

    npm i @lucianodltec/vuejs-storage

    DownloadsWeekly Downloads

    3

    Version

    3.1.2

    License

    MIT

    Unpacked Size

    76.5 kB

    Total Files

    41

    Last publish

    Collaborators

    • avatar