Javascript 从localstorage&；获取项目；更新/删除

我不熟悉Javascript中的localStorage。我正在做todo的CRUD（我正在使用jsonplaceholder获取todo列表）。问题是，我必须在单击该元素的按钮（删除/编辑）时获取该元素。我附加一个图像以查看如何渲染元素：

这里我想要的是，当我单击“Delete”（删除）按钮元素时，我想让该特定元素应用

.splice

，并从localStorage阵列中删除该元素

之后：单击“编辑”时如何编辑特定元素

注：如果有效，我将使用Vue.js

PS2。如果你需要更多关于代码的信息，请告诉我

---

致以最良好的祝愿

从jsonplaceholder发送的每个

todo

的通常结构为以下格式：

{
已完成：错误，
id:1，
标题：“授权或授权”，
用户ID:1
}

如果您从

https://jsonplaceholder.typicode.com/todos

，则您将获得上述对象的数组

现在要回答您的问题，最简单的方法是将屏幕上显示的整个对象数组存储到localstorage中的单个键中。例如：

//将获取的TODO存储到名为“TODO”的状态`
setItem（“todos”，todos）；

删除特定todo时，可以修改状态

todos

，然后再次调用

localStorage.setItem（“todos”，todos），以便使用最新数据更新本地存储

编辑时可以应用类似的逻辑

另外，要回答您关于如何在单击
edit
按钮时编辑特定元素的问题，只需从todo对象数组中查找对象并更新您的
todo
状态：

const todo=todos.find（todo=>todo.id==currentlySelectedTodoId）；
//其余的逻辑
由于您没有提供任何代码，因此我向您提供了可能的猜测。代码如下：

<template>
  <div>
    <ul>
      <li v-for="(item, index) in list" :key="index">
        <span>{{ item }}</span>
        <button @click="deleteFromList(index)">Delete</button>
        <button @click="editItem(index)">Edit</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: ["john", "doe", "jane"]
    };
  },
  methods: {
    deleteFromList(index) {
      this.list.splice(index, 1);
    }
  }
};
</script>
enter code here




{{item}}
删除
编辑


导出默认值{
数据（）{
返回{
清单：[“约翰”、“多伊”、“简”]
};
},
方法：{
deleteFromList（索引）{
本列表拼接（索引1）；
}
}
};
在这里输入代码

请访问此链接简要了解。
这是否回答了您的问题？