How to make data from localStorage reactive in Vue js

Question

I am using localStorage as a data source in a Vue js project. I can read and write but cannot find a way to use it reactively. I need to refresh to see any changes I've made.

I'm using the data as props for multiple components, and when I write to localStorage from the components I trigger a forceUpdate on the main App.vue file using the updateDate method.

Force update is not working here. Any ideas to accomplish this without a page refresh?

...............
data: function () {
        return {
            dataHasLoaded: false,
            myData: '',
        }
    },
mounted() {
        const localData = JSON.parse(localStorage.getItem('myData'));
        const dataLength = Object.keys(localData).length > 0;
        this.dataHasLoaded =  dataLength;
        this.myData = localData;
    },
methods: {
    updateData(checkData) {
        this.$forceUpdate();
        console.log('forceUpdate on App.vue')
    },
},
...............

Answer 1

Here's how I solved this. Local storage just isn't reactive, but it is great for persisting state across refreshes.

What is great at being reactive are regular old data values, which can be initialized with localStorage values. Use a combination of a data values and local storage.

Let's say I was trying to see updates to a token I was keeping in localStorage as they happened, it could look like this:

const thing = new Vue({
  data(){
    return {
      tokenValue: localStorage.getItem('id_token') || '',
      userValue: JSON.parse(localStorage.getItem('user')) || {},
    };
  },
  computed: {
    token: {
      get: function() {
        return this.tokenValue;
      },
      set: function(id_token) {
        this.tokenValue = id_token;
        localStorage.setItem('id_token', id_token)
      }
    },
    user: {
      get: function() {
        return this.userValue;
      },
      set: function(user) {
        this.userValue = user;
        localStorage.setItem('user', JSON.stringify(user))
      }
    }
  }
});

The problem initially is I was trying to use localStorage.getItem() from my computed getters, but Vue just doesn't know about what's going on in local storage, and it's silly to focus on making it reactive when there's other options. The trick is to initially get from local storage, and continually update your local storage values as changes happen, but maintain a reactive value that Vue knows about.