Reactive layer for interacting with localStorage from Vue. Plugin for Vue 2.
npm install --save https://github.com/ropbla9/vue-reactive-storage
- This package is not on NPM, use GitHub source only.
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...
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.
}
})