CODEWITHSUNDEEP
javascriptvue.jsvuejs2vue-componentvue-resource
artem0071
artem0071

Reputation: 2419

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

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?

Upvotes: 57

Views: 89382

Answers (7)

Alexis Gatuingt
Alexis Gatuingt

Reputation: 547

Update for Vue3 with composition API

import { ref, onMounted, onUnmounted } from 'vue';

export default {
  setup() {
    const localValue = ref(localStorage.getItem('myValue') || '');

    const handleStorageChange = (event) => {
        localValue.value = event.newValue;
       
        console.log('New value:', localValue.value);
    };

    onMounted(() => {
      window.addEventListener('storage', handleStorageChange);
    });

    onUnmounted(() => {
      window.removeEventListener('storage', handleStorageChange);
    });

    return {
      localValue,
    };
  },
};

Upvotes: -1

arve0
arve0

Reputation: 3647

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: '<p>token - {{token}}</p>'
})

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.

Upvotes: 7

Lucas
Lucas

Reputation: 1280

The VueJs site has a page about this. https://v2.vuejs.org/v2/cookbook/client-side-storage.html

They provide an example. Given this html template

<template>
  <div id="app">
    My name is <input v-model="name">
  </div>
<template>

They provide this use of the lifecycle mounted method and a watcher.

const app = new Vue({
  el: '#app',
  data: {
    name: ''
  },
  mounted() {
    if (localStorage.name) {
      this.name = localStorage.name;
    }
  },
  watch: {
    name(newName) {
      localStorage.name = newName;
    }
  }
});

The mounted method assures you the name is set from local storage if it already exists, and the watcher allows your component to react whenever the name in local storage is modified. This works fine for when data in local storage is added or changed, but Vue will not react if someone wipes their local storage manually.

Upvotes: 11

Stephan Ngaha
Stephan Ngaha

Reputation: 121

LocalStorage or sessionStorage are not reactive. Thus you can't put a watcher on them. A solution would be to store value from a store state if you are using Vuex for example. Ex:

SET_VALUE:(state,payload)=> {
    state.value = payload
    localStorage.setItem('name',state.value)
    or
    sessionStorage.setItem('name',state.value)
  }

Upvotes: 0

Salam
Salam

Reputation: 1168

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,
  }
}

Upvotes: 47

Yash Ojha
Yash Ojha

Reputation: 818

you can do it in two ways,

  1. by using vue-ls and then adding the listener on storage keys, with 

        Vue.ls.on('token', callback)

    or

        this.$ls.on('token', callback)

  2. by using storage event listener of DOM:

        document.addEventListener('storage', storageListenerMethod);

Upvotes: 2

FitzFish
FitzFish

Reputation: 8629

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.

Upvotes: 31

Related Questions