javascript - 通过 HTML 标签获取对象并从本地存储中移除

Question

这是我关于 stackoverflow 的第一个问题。以及一点代码经验。

所以我有一个这样的本地存储:

myDB: "[{"key:"123","label":"abc"}]

我有一个以“abc”为值的 div:

<div id="name">abc</div>

还有很多id的div克隆值不同

<div id="name">abc</div>
<div id="name">cde</div>
<div id="name">efg</div>

我想读取 ID“name”的值，使一个 if/else 看起来像“abc”在本地存储中，如果是，用键删除它。否则不删除。

我考虑过使用 document.getElement 从 ID 获取值并将其与 localstorage 进行比较，然后使用 if else 来做那件事。但是有很多克隆都有那个事件来触发删除它的功能。因此该函数不知道要比较哪个 ID 的值并将其删除。

对于这个新手问题，我真的很尴尬。但我不得不问，非常感谢:)

*新问题:

我想删除本地存储的最后一个元素。我可以将 localstorage 转换为数组然后使用 array.pop() 吗？然后再将改变的数组转换到本地存储？

Answer 1

首先，正如其他人提到的，id 必须是唯一的。您可以改用任何其他属性，例如 class:

<div class="name">abc</div>
<div class="name">def</div>
<div class="name">ghi</div>
<div class="name">jkl</div>
<div class="other">mno</div>

然后，要查询这些元素，您可以使用 document.getElementsByClassName("name")，它将返回一个类似数组的对象。您可以使用 spread syntax 和 map 方法的组合将此对象转换为值数组:

let values = [...document.getElementsByClassName("name")].map(e => e.innerHTML);

要使用本地存储，您可以使用 localStorage.setItem 和 localStorage.getItem。如您所知，本地存储仅存储字符串，因此 JSON.parse 和 JSON.stringify 方法也很有用。

代码示例:

localStorage.setItem("myDB", '[{"key":"123","label":"abc"}, {"key":"456","label":"mno"}]');
console.log('Local storage before: ', localStorage.getItem("myDB"));
// extracting div values to an array
let values = [...document.getElementsByClassName("name")].map(e => e.innerHTML);
// creating a js object from myDB string
let db = JSON.parse(localStorage.getItem("myDB"));
// leaving only those elements, which labels are not in the values array
localStorage.setItem("myDB", JSON.stringify(db.filter(item => !values.includes(item.label))));
console.log('Local storage after: ', localStorage.getItem("myDB"));

JSFiddle 链接:https://jsfiddle.net/v03wpgq1/4/