Reactive layer for interacting with localStorage from Vue. Plugin for Vue 2.
Switch branches/tags
Clone or download
Latest commit 4c515e4 Jun 14, 2018
Permalink
Failed to load latest commit information.
dist build update Mar 31, 2017
src default value instead schema constructor Mar 31, 2017
test manual test project setup Mar 2, 2017
.eslintrc.js add eslint Mar 2, 2017
.gitignore add webpack Mar 2, 2017
README.md Update README.md Jun 14, 2018
package.json add contributors Mar 2, 2017
webpack.config.js set umd output Mar 2, 2017

README.md

vue-reactive-storage

Reactive layer for interacting with localStorage from Vue. Plugin for Vue 2.

install

npm install --save https://github.com/ropbla9/vue-reactive-storage

  • This package is not on NPM, use GitHub source only.

why

window.localStorage cannot be reactive if you use it directly with Vue, ex

new Vue({
    data {
      localStorage: window.localStorage
    },
    template: " <div> {{localStorage.notes}}, {{localStorage.lang}} ... </div> ",
    created: function() {
        this.localStorage.lang = "other value";
    }
})

Code above will not react, even bind to view. So...

how to use

import reactiveStorage from "vue-reactive-storage";
// Set initial values
Vue.use(reactiveStorage, {
    "notes": 'foo',
    "lang": 'foo',
    "name": 'foo',
    "count": 1,
    "userConfig": {age: 10, name: 'fred'}
});

Define vars that will be stored and proxied by Vue (any other var in window.localStorage that is not on this array will not be proxied).

Now you can acess the namespace localStorage in Vue.

new Vue({
    template: " <div> {{localStorage.notes}}, {{localStorage.lang}} ... </div> ",
    created: function() {
        this.localStorage.lang = "other value"; // will react on the view and on real localStorage.
    }
})