Vue.js - Update Array with current localStorage at refresh

Question

I want to check for the localStorage when at a page reload, if there is already an item there and if yes, I want to update "cryptocurreny" with the current values (title & value).

When I add something with my addCrypto() function, my localStorage looks like this:

[{"name":"ETH","value":"1.5"},{"name":"BTC","value":"2.75"}]

This is my component:

<template>
  <div>

    <div v-for="coin in cryptocurrency">
      <input v-model="coin.name">
      <input v-model="coin.value">
    </div>
    <button @click="addCrypto">
      New Cryptocurreny
    </button>

  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      cryptocurrency: [],
    }
  },
  methods: {
    set_data() {
      localStorage.setItem( 'cryptocurrencies', JSON.stringify(this.cryptocurrency) );
      this.cryptocurrency = this.get_data();
    },
    get_data(){
      return localStorage.getItem('cryptocurrencies');
    },
    addCrypto() {
      localStorage.setItem( 'cryptocurrencies', JSON.stringify(this.cryptocurrency) );
      this.cryptocurrency.push({ name: '', value: ''});
    }
  }
}
</script>

But I tried to add localStorage.getItem('cryptocurrencies'); at the end of my addCrypto() function but I get errors and at a page reload my cryptocurreny variable is empty.

I have a simple script you can follow that can be of help if you want — Ezekiel
– Ezekiel, Commented Jan 12, 2018 at 16:42

tony19 · Accepted Answer · 2022-07-16 02:44:19Z

1

I can't really work out what you're doing, but from what I see the set_data() function isn't called anywhere?

You'll want to use the mounted or created hook (see which one suits you) and do the check in there.

Example

mounted () {
  const saved = localStorage.getItem('cryptocurrencies')
  if (saved) {
    this.cryptocurrency = saved
  }
}

You could put that code into it's own method and call that in mounted() of course.

edited Jul 16, 2022 at 2:44

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Jan 12, 2018 at 16:38

tribe

3212 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue.js - Update Array with current localStorage at refresh

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related