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 updateData 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')
    },
},
...............

`this.clientFirstName =` assumes you have a `clientFirstName: ''` somewhere in your `data`: `return { clientFirstName: '', dataHasLoaded: false, myData: '' }` — ippi, Jun 25 '18 at 00:58
You should not need a $forceUpdate here. Maybe show us how you save the data? If you type in `localStorage.getItem('myData')` in your javascript console (on the app page), do you get output (other than null)? — ippi, Jun 25 '18 at 01:04
Hi, Yes everything is working, I can read from and write to localStorage but I cannot see the changes on the screen without refreshing the page. I need to force Vue to re-read the data when I've updated it to see the latets changes on the screen. — UXCODA, Jun 25 '18 at 01:07
https://jsfiddle.net/ippi/fd35but8/5/ I'm trying to reproduce your problem, and I can see you need something to detect a localStorage change (sending some event, using a event bus, setting a state with vuex, etc), but I can't see any reactivity problems from vue's side. — ippi, Jun 25 '18 at 01:53
Thanks, I haven't tried Vuex for this maybe thats the solution. What I can do but seems convoluted is emit the changes straight to the main app `data{ myData: ''}` and then performing forceUpdates where needed to redo the computed properties. — UXCODA, Jun 25 '18 at 01:57
https://stackoverflow.com/a/43474950/1497533 Maybe this can be a solution? — ippi, Jun 25 '18 at 02:03
Thanks I saw that solution unfortunately it looks too simple for my project with lots of computed properties within components. — UXCODA, Jun 25 '18 at 02:08
https://stackoverflow.com/a/52782774/5416602 This may also be helpful. Worked for me. — Umair Malhi, Jun 24 '20 at 14:19

score 11 · Answer 1 · answered Nov 14 '19 at 16:54

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.

score 1 · Answer 2 · answered Jun 26 '18 at 03:23

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.

score 0 · Answer 3 · answered Oct 03 '22 at 21:44

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++;
        ...

How to make data from localStorage reactive in Vue js

3 Answers3

Linked