无法访问存储在 vue.js 中本地存储 [object Object] 中的 json 对象

Question

我有 fieldObj，我经常需要。它来自数据库。 我想把它存储在localStorage中。

下面是我编写的代码，如果 localStorage 没有，它会从数据库中获取 fieldObj。

当我尝试访问存储在 localStorage 中的 json 数据时，它只显示

[object Object]

代码将 localStorage 的 fieldObj 视为字符串。

我需要访问存储在 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>

Answer 1

在localStorage中这样设置

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

并使用此方法访问它解决了问题

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

---

一个更复杂的例子可以是 ，使用 Nuxt。