How to make data from localStorage reactive in Vue js

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.

For anyone facing the same dilemma, I wasn't able to solve it the way that I wanted but I found a way around it.

• I originally loaded the data in localStorage to a value in the Parent's Data called myData.
• Then I used myData in props to populate the data in components via props.
• When I wanted to add new or edit data,
  • I pulled up a fresh copy of the localStorage,
  • added to it and saved it again,
  • at the same time I emit the updated copy of localStorage to myData in the parent,
  • which in turn updated all the data in the child components via the props.

This works well, making all the data update in real time from the one data source.

As items in localstorage may be updated by something else than the currently visible vue template, I wanted that updating function to emit a change, which vue can react to.

My localstorage.set there does this after updating the database:

    window.dispatchEvent(new CustomEvent('storage-changed', {
        detail: {
            action: 'set',
            key: key,
            content: content
        }
    }));

and in mounted() I have a listener which updates forceRedraw, which - wait for it - force a redraw.

    window.addEventListener('storage-changed', (data) => {
        this.forceRedraw++;
        ...

Ryan's answer works perfectly but I wanted to share it is also possible to use watch to up keep the local storage in sync with a ref:

const token = ref(localStorage.getItem('token') || undefined)
watch(token, newValue => {
    if (!newValue) localStorage.removeItem('token')
    else localStorage.setItem('token', newValue)
})