Read data for localstorage with Vuejs application in forma Json-CodePudding

I don't know how to do it, or is it possible to read the data of this LocalStorage with vuejs application enter image description here

My LocalStorage is like that :

Key value

1    {"Name" : "Name1", "Age":"Age1", "Mail":"Mail1" }

2    {"Name" : "Name2", "Age":"Age2", "Mail":"Mail2" }

I want to have a web page that displays a table like this :

Name	Age	Mail
Name1	Age1	Mail1
Name2	Age2	Mail2

I tried to do this in my vuejs programme

<template>
    <div > 
      <h1>Read From LocalStorage</h1>
      <table>
      <thead>
        <tr>
          <th>Clé</th>
          <th>Valeur</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(value, key) in store" :key="key">
          <td>{{ key }}</td>
          <td>{{ value }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  // eslint-disable-next-line
  data() {
    return {
      store: localStorage,
      StoreJson: localStorage.getItem("1")
    }
  },
  computed: {
    localStorage() {
      return window.localStorage
    },
  },
}
</script>

By I don't have the table that I want. I get all the values at once

Key	Value
1	{"Name" : "Name1", "Age":"Age1", "Mail":"Mail1" }
2	{"Name" : "Name2", "Age":"Age2", "Mail":"Mail2" }

if you have any idea what i can do or or if you have any other tips ?

CodePudding user response：

You are storing your values as a json string. You need to fetch the string, convert it to a javascript object and get the keys from there:

<table>
    <thead>
        <tr>
            <th>Key</th>
            <th>Name</th>
            <th>Age</th>
            <th>Mail</th>
        </tr>
    </thead>
    <tbody>
        <tr v-for="(value, key) in store" :key="key">
            <td>{{ key }}</td>
            <td>{{ JSON.parse(value).Name }}</td>
            <td>{{ JSON.parse(value).Age }}</td>
            <td>{{ JSON.parse(value).Mail }}</td>
        </tr>
    </tbody>
</table>

CodePudding user response：

You must JSON.parse(localStorage.getItem("1")) - LocalStorage can store only Strings and nothing else so you need to serialize and deserialize your data.

CodePudding user response：

The keys and the values stored with localStorage are always in the string format. Hence, While reading back from localStorage we should convert the JSON string into JSON object to access it's properties.

Looks like you are just adding the JSON strings into an array, It should be add into an array after parsing to JSON object.

this.store.push(JSON.parse(localStorage.getItem('1')))

Then, You can access that in template like this :

<tbody>
    <tr v-for="(value, key) in store" :key="key">
        <td>{{ key }}</td>
        <td>{{ value.Name }}</td>
        <td>{{ value.Age }}</td>
        <td>{{ value.Mail }}</td>
    </tr>
</tbody>