通过 HTML 标签获取对象并从本地存储中删除答案

【问题标题】：Get object by HTML tag and remove from localstorage通过 HTML 标签获取对象并从本地存储中删除
【发布时间】：2018-06-14 21:26:00
【问题描述】：

这是我关于 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”的值，在localstorage中创建一个if/else，就像“abc”一样，如果是的话，用key删除它。否则不删除。

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

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

*新问题：

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

【问题讨论】：

ids 在页面上应该是唯一的；您可能想要做的是改用class，然后getElementsByClassName 将为您提供所有元素的HTMLCollection
我同意 Hamms 的观点，你的 divs 应该有一个唯一的 ID。另外，这里有一些管理本地存储的好方法：setItem()向本地存储添加键和值getItem()通过键检索值removeItem()通过键删除项目clear()清除所有存储

标签： javascript html local-storage

【解决方案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/

【讨论】：

@JonP 同意了。这就是 id 的含义
@JonP - 我的意思是，他们真的不应该。但这并不一定意味着必须是唯一的：jsfiddle.net/s91moxdu ...
@TravisJ，不，根据规范，它必须是唯一的，请参阅：w3.org/TR/2011/WD-html5-20110525/elements.html#the-id-attribute & developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id
@JonP - 我的意思是，为了迂腐，必须的定义是应该。因此，从语义上讲，在您早期的 cmets 中，两者之间没有区别。但是从使用的角度来看，在某些情况下可以使用非唯一标识符，如图所示。它们应该是独一无二的。它们也不能是唯一的，但仍可用作定位元素的有效标识符。希望没有人这样做，但最好至少显示所有信息。
@TravisJ，我们已经把它搞得够呛，但是，作为迂腐的，“必须”的定义不是“应该”：blog.oxforddictionaries.com/2014/03/03/must-should-ought。 “应该”意味着有一个选项，但有一个偏好。 “必须”没有选项，这就是规范的规定。

【解决方案2】：

id 属性在页面上应该是唯一的，否则只有页面上的最后一个属性才能被轻松引用（或至少正确引用）。
应该有一个包含这些的部分，这使得它们易于查询。可能在一个元素内部，其 id 保证唯一地保存一组名称值对。
使用document.querySelectorAll 是查找这些元素的最佳选择，并且可以通过创建可查询的结构来简化。
有了一组要查找的项目，应该很容易迭代和测试 localStorage 内部的值和键。

【讨论】：