Reactive layer used to interact with localStorage for Vue 2
npm install vue-reactive-localstoragenpm install vue-reactive-localstorage
yarn add vue-reactive-localstorage
window.localStorage is not reactive if you use it directly with Vue, for example
localStorage in data and you change a property it will not reflect
js
new Vue({
data: {
storage: window.localStorage
},
template: " {{storage.notes}}, {{storage.lang}} ... ",
created: function() {
this.storage.lang = "other value";
}
})
`
$3
`js
import ReactiveStorage from "vue-reactive-localstorage";
// 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 access the namespace storage in Vue.
`js
new Vue({
template: " {{storage.notes}}, {{storage.lang}} ... ",
created: function() {
this.storage.lang = "other value"; // will react on the view and on real localStorage.
}
})
``