通过HTML标记获取对象并从本地存储中删除
通过HTML标记获取对象并从本地存储中删除
提问于 2018-06-15 05:26:01
这是我关于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“的值，如果/否则看起来像"abc”在本地存储中，如果是，用键删除它。否则不会删除。
我想过使用document.getElement从ID中获取值，并将其与本地存储进行比较，然后使用if else来完成此操作。但是有许多克隆人具有触发删除它功能的事件。因此该函数不知道要比较和删除哪个ID值。
对于这个新手问题，我真的很尴尬。但我必须先问一下，非常感谢:)
*新问题：
我想删除本地存储的最后一个元素。可以使用array.pop()将本地存储转换为数组吗？然后将更改后的数组再次转换为本地存储？
回答 1
Stack Overflow用户
发布于 2018-06-15 06:16:53
首先，正如其他人所提到的，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/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50866168
复制相关文章
相似问题