Is there any way to ‘watch’ for localstorage in Vuejs?

by

Sure thing! The best practice in my opinion is to use the getter / setter syntax to wrap the localstorage in.

Here is a working example:

HTML:

<div id="app">
  {{token}}
  <button @click="token++"> + </button>
</div>

JS:

new Vue({
  el: '#app',
  data: function() {
    return {
      get token() {
        return localStorage.getItem('token') || 0;
      },
      set token(value) {
        localStorage.setItem('token', value);
      }
    };
  }
});

And a JSFiddle.

More Related Contents:

  1. How to add external JS scripts to VueJS Components?
  2. Communication between sibling components in Vue.js 2.0
  3. Vue.js – How to properly watch for nested data
  4. [Vue warn]: Property or method is not defined on the instance but referenced during render
  5. How to listen for ‘props’ changes
  6. Passing props dynamically to dynamic component in VueJS
  7. Vuejs typescript this.$refs..value does not exist
  8. Vue v-on:click does not work on component
  9. Vue template or render function not defined yet I am using neither?
  10. Global data with VueJs 2
  11. When should I use Vuex?
  12. Vue.js – Add class to clicked button
  13. Vue.js dynamic images not working
  14. vuejs update parent data from child component
  15. Vuejs Error: The client-side rendered virtual DOM tree is not matching server-rendered
  16. Vuex state on page refresh
  17. Vuejs and Vue.set(), update array
  18. How to watch store values from vuex?
  19. NavigationDuplicated Navigating to current location (“/search”) is not allowed
  20. Accessing Vuex state when defining Vue-Router routes
  21. Vue JS: Difference of data() { return {} } vs data:() => ({ })
  22. Vue.js: Conditional class style binding
  23. how to fix ‘Access to XMLHttpRequest has been blocked by CORS policy’ Redirect is not allowed for a preflight request only one route
  24. VueJS/Typescript – Cannot find module ‘./components/Navigation’ or its corresponding type declarations
  25. Methods vs Computed in Vue
  26. Passing props with programmatic navigation Vue.js
  27. How to use Vuetify tabs with vue-router
  28. Force download GET request using axios
  29. Importing javascript file for use within vue component
  30. Detect Back Button in Navigation Guards of Vue-Router

Leave a Comment