VueJs 使用推送在 LocalStorage 中插入数据数组

Question

为了解释我的问题，我想制作一个小游戏，我们必须在给定时间内尽可能多地点击一个点。问题是我想制作一个列表来显示所有旧结果。我向您展示了这个的世界代码...（更新 JSON）

我的 VueJs（前面）：

<div class="resultat">
   <p v-for="resultat in resultats" :key="resultat">{{ resultat}}</p>
</div>

我的 VueJs（返回）：

data() {
    return {
      clique: 0,
      resultats: [JSON.parse(localStorage.getItem("resultat"))],
    };
  },
methods: {
onTimesUp() {
    this.resultats.push(this.clique)
    localStorage.setItem("resultat", JSON.stringify(this.resultats));
  }
}

4次尝试后的结果是：[ [ [ [ null, 6 ], 7 ], 3 ], 5 ]

我想：[6, 7, 3, 5]

请帮助我，我已经尝试了 2 天...

Answer 1

需要存储为字符串，所以需要使用JSON存储（JSON是serialize/deserializeJavascript数据转字符串的一种方式） :

localStorage.setItem("resultat", JSON.stringify(this.resultats) );

和

message: JSON.parse(localStorage.getItem("resultat")),

有关 JSON 的更多信息，请参阅此处：https://www.w3schools.com/js/js_json.asp

Answer 2

主要问题是你存储了一个项目数组，然后将数组放在一个数组中：resultats: [JSON.parse(localStorage.getItem("resultat"))],

删除包装 [ 和 ]。

虽然就个人而言，将数据作为声明保持干净比使用渲染前生命周期挂钩来填充它更好，即创建，beforeMount。

同样在初始加载时没有分数 localStorage.getItem("resultat") 将 return 为空，导致您的数组变为空。对其进行检查或简单地执行 || '[]'

  data() {
    return {
      clique: 0,
      resultats: []
    };
  },
  created() {
     this.resultats = JSON.parse(localStorage.getItem("resultat") || '[]')
  },
  methods: {
    onTimesUp() {
      this.resultats.push(this.clique)
      localStorage.setItem("resultat", JSON.stringify(this.resultats));
    }
  }

VueJs 使用推送在 LocalStorage 中插入数据数组

VueJs insert array of data in LocalStorage using push

arrays

vue.js

object

local-storage

back