cant access json object stored in local storage [object Object] in vue.js-CodePudding

I have fieldObj which I need frequently. It comes from database. I want to store it in localStorage.

below is the code I wrote which fetch fieldObj from database if localStorage don't have it.

When I try to access the json data stored in localStorage it just shows

[object Object]

code is treating fieldObj of localStorage as string.

I need to access key values pairs stored in fieldObj.

<script>
export default {
  data() {
    return {
      fields: JSON,
    }
  },
  created() {
    if (!localStorage.getItem('field-obj')) {
      axios
        .get('/api/u/record/', {
          withCredentials: true,
        })
        .then((response) => {
          response.data.forEach((el) => {
            if (el.COLUMN_TYPE == 'int') el.COLUMN_TYPE = 'number'
          })
          const fieldObj = response.data[0].fieldObj[0]
          this.fields = fieldObj
        })
        .then(() => {
          localStorage.setItem('field-obj', this.fields)
        })
    } else {
      console.log(new Object(localStorage.getItem('field-obj')))
      // console.log(localStorage.getItem('field-obj')[0].username)
    }
  },
}
</script>

CodePudding user response：

Setting it in the localStorage like this

localStorage.setItem('field-obj',JSON.stringify(this.fields))

and accessing it with this fixed the issue

this.fields = JSON.parse(localStorage.getItem('field-obj'))

A more complex example could be found here, using Nuxt.