时间戳

首页 > 解决方案 > 通过 HTML 标签获取对象并从本地存储中删除

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

问题描述

这是我关于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”一样，如果是的话，用密钥删除它。否则不删除。

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

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

*新问题：

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

标签： javascripthtmllocal-storage

解决方案

首先，正如其他人提到的，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")which 将返回一个类似数组的对象。您可以使用扩展语法和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/

推荐阅读