VueJs 使用 push 在 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

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

去掉包装[和]。

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

同样在没有分数的初始加载时localStorage.getItem("resultat") 将返回 null，导致您的数组变为 null。做检查或干脆做|| '[]'

  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));
    }
  }

Answer 2

您需要将其存储为字符串，因此您需要使用 JSON 进行存储（JSON 是一种将 Javascript 数据序列化/反序列化为字符串的方式）：

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

和

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

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