如何删除本地存储阵列中的特定编号？

Question

我正在制作一个带有成绩计算器的 web 应用程序，我可以在其中添加和删除成绩。 它们保存在本地存储中。 尝试删除指定等级时，它会删除最近添加的等级。 如何专门删除数组中的 int？

<template>
  <div>
    <h2>Grade-Calculator</h2>
    <div>
      <ul>
        <li v-for="(g,idx) in grades" :key="idx">
          {{idx+1}}. Grade : {{g}}
          <button v-on:click="delGrade()">Delete</button>
        </li>
      </ul>
      <div>
        <label>New Grade:</label>
        <input type="text" v-model="newGrade" />
        <button v-on:click="addGrade()">Add</button>
      </div>
      <br />
      <div>
        <p>Average: {{ calcAvg() | round}}</p>
      </div>
    </div>
  </div>
</template>
<!-- The Script-->
<script>
export default {
  data: () => ({
    grades: [],
    newGrade: null,
    avg: 0,
    formattedNumber: ""
  }),
  name: "Home",
  props: {},

  methods: {
    delGrade: function() {
      var idx = this.grades.indexOf(this.grades);
      this.grades.splice(idx);
      localStorage.removeItem("grades");
      localStorage.setItem("grades", this.grades);
    }
  },
  mounted() {
      this.grades = JSON.parse(localStorage.getItem("grades")) || [];
  },
};
</script>

Answer 1

首先，您需要在delGrade(gradeToDelete)中删除等级，一旦拥有它（以及this.grades.indexOf(gradeToDelete)的索引），您就可以使用该索引。

此外，我认为.splice 需要一个 deleteCount 来删除索引处的元素。 尝试更改this.grades.splice(idx); 到this.grades.splice(idx, 1);

Answer 2

我假设您的数据看起来像数组中的整数。 它们将存储在其中，如下例所示。

let grades = [8, 9, 5, 6, 3];
localStorage.setItem('grades', JSON.stringify(grades));

要从数组中删除单个键，首先将其解析回数组格式，然后使用Array.prototype.filter方法创建一个没有要删除的等级的新数组。

let gradeToRemove = 5;
let storedGrades = JSON.parse(localStorage.getItem('grades'));
let newGrades = storedGrades.filter(grade => grade !== gradeToRemove);
localStorage.setItem('grades', JSON.stringify(newGrades));

Answer 3

您应该提供要从数组中删除的 id

 <button v-on:click="delGrade(idx)">Delete</button>

那么您应该收到该 ID 并使用它

    delGrade: function(idToDelete) {
      this.grades.splice(idToDelete, 1);
      localStorage.removeItem("grades"); // it is not necessary, coz you will override all key grades in next line
      localStorage.setItem("grades", this.grades);
    }