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

Question

I'm attempting to watch for localstorage:

Template:

<p>token - {{token}}</p> 

Script:

computed: {   token() {     return localStorage.getItem('token');   } } 

But it doesn't change, when token changes. Only after refreshing the page.

Is there a way to solve this without using Vuex or state management?

Answer 1

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.

Answer 2

localStorage is not reactive but I needed to "watch" it because my app uses localstorage and didn't want to re-write everything so here's what I did using CustomEvent.

I would dispatch a CustomEvent whenever you add something to storage

localStorage.setItem('foo-key', 'data to store')  window.dispatchEvent(new CustomEvent('foo-key-localstorage-changed', {   detail: {     storage: localStorage.getItem('foo-key')   } })); 

Then where ever you need to watch it do:

mounted() {   window.addEventListener('foo-key-localstorage-changed', (event) => {     this.data = event.detail.storage;   }); }, data() {   return {     data: null,   } }