Is there any way to 'watch' for localstorage in Vuejs?

Question

I\'m attempting to watch for localstorage:

Template:

token - {{token}}

Script:

computed: {
  t         


        

Answer 1

Update: vue-persistent-state is no longer maintained. Fork or look else where if it doesn't fit your bill as is.

If you want to avoid boilerplate (getter/setter-syntax), use vue-persistent-state to get reactive persistent state.

For example:

import persistentState from 'vue-persistent-state';  

const initialState = {
  token: ''  // will get value from localStorage if found there
};
Vue.use(persistentState, initialState);

new Vue({
  template: '
token - {{token}}
'
})

Now token is available as data in all components and Vue instances. Any changes to this.token will be stored in localStorage, and you can use this.token as you would in a vanilla Vue app.

The plugin is basically watcher and localStorage.set. You can read the code here. It

1. adds a mixin to make initialState available in all Vue instances, and
2. watches for changes and stores them.

Disclaimer: I'm the author of vue-persistent-state.