How do I save a hashmap to localstorage using Vue?

Question

Below is what I have right now.

Basically, it deletes an element from this.summaries and right after that, I assigned localStorage.summaries to be this.summaries.

My guess is that localStorage.summaries are not saved as hashmaps as I intended. How can I do that?

...
  mounted() {
    if (localStorage.summaries) {
      this.summaries = localStorage.summaries;
    }
  },
  ...
  deleteRow(symbol) {
    delete this.summaries[symbol]
    localStorage.summaries = this.summaries
  },
...

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

...

    <tbody>
      <tr v-for="symbol in newSummaries" :key="symbol">
        ...
        <td class="border border-green-600"><button v-on:click="addRow(symbol['ticker_symbol'])">ADD</button></td>
      </tr>
    </tbody>
    
...

I think it can be helpful to you . developer.mozilla.org/en-US/docs/Web/API/Window/localStorage — Ali M. Sadeghi
– Ali M. Sadeghi, Commented Sep 20, 2021 at 3:39

hgb123 · Accepted Answer · 2021-09-20 03:42:22Z

4

According to the (doc), the storage value is a DOMString, and it

corresponds exactly to the JavaScript primitive String type

So if you want to save a hashmap, convert it to string with JSON.stringify and setItem, and when you getItem, parse it back to hashmap with JSON.parse

// set
localStorage.setItem('summaries', JSON.stringify(this.summaries))

// get
this.summaries = JSON.parse(localStorage.getItem('summaries'))

answered Sep 20, 2021 at 3:42

hgb123

14.9k3 gold badges24 silver badges43 bronze badges

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

2 Comments

jginso7 Over a year ago

Thank you! It works out fine! I guess I wanted to utilize some of what was on here kr.vuejs.org/v2/cookbook/client-side-storage.html but didn't work for me.

jginso7 Over a year ago

Actually further down that document does have JSON.stringify(). ha

Collectives™ on Stack Overflow

How do I save a hashmap to localstorage using Vue?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related