SIM*_*SIS 6 html javascript local-storage
我有一个存储为 JSON 数组的 localStorage 键 (f7Contacts),它应该是。我知道如何使用localStorage.removeItem("myKey");.
正如您所看到的,我的数组由一组嵌入其中的 JSON 数组组成。有更广泛的一个名为f7Contacts和它里面有一些子阵列(以某种方式为它们命名)命名visitings和consultas。现在,我要删除的不是任何 JSON 数组中的单个项目,也不是整个f7Contacts数组,而是名为Consultas的 JSON 子数组。
我尝试了很多方法,但我无法获得有效的代码。
这是我到目前为止所得到的:
我的字符串化数组如下所示:
(现在我已经更新了字符串以使其更像我的真实案例,因为建议的答案设法删除了consultas其中一个联系人中的 ,并且在一种情况下它会consultas从第一个联系人中删除 并删除其余的联系人。我为您命名了 ELISA 和 FRANK 以区分它们。还更新了我的 Javascript 和 html 作为我自己的代码和 ????? 的答案之一的混合物。我这样做是为了保持我的环境一致。这段代码设法删除第一个联系人的咨询,但也删除其余的联系人。):
爪哇脚本
document.addEventListener("DOMContentLoaded", function() {
var contacts = [{
id: "95470e9e-ee5c-4467-9500-1fcbeae1b57c",
hasPic: true,
picId: 3,
createdOn: "2021-08-01T17:31:32.230Z",
firstName: "ELISA",
company: "La Fábrica",
job: "Barrendero",
mobile: "+53555555",
phone: "+5372222222",
sms: "",
email: "fulano@nauta.cu",
madedate: "Invalid date",
clinic: "2",
gender: "M",
birthday: "Invalid date",
age: "47",
visitings: [{
id: "1",
vdate: "19/07/-2006 12:00 AM",
pdcb: "Est officia dolorem ",
vdiagnose: "Laborum Ea consecte",
vrecom: "Mollit cillum sed pe",
nextv: "Invalid date"
}],
consultas: [{
id: "1",
ldate: "04/07/-1978 12:00 AM",
lmotive: "Soluta cumque aspern",
ldiagnose: "Quidem autem do ut o",
ttest: "Rerum sint atque il",
etest: "Officiis deserunt un",
mtest: "Nihil a dolore rem s",
nextv: "Invalid date"
},
{
id: "2",
ldate: "04/04/-1991 12:00 AM",
lmotive: "Eius in est enim no",
ldiagnose: "In aliqua Sunt dol",
ttest: "Sunt dolor eu sed N",
etest: "Quia aut reprehender",
mtest: "Unde libero autem an",
nextv: "Invalid date"
}
],
isFavorite: true
},
{id: "95470e9e-ee5c-4467-9500-1fcbeae1b57c",
hasPic: true,
picId: 3,
createdOn: "2021-08-01T17:31:32.230Z",
firstName: "FRANK",
company: "La Fábrica",
job: "Barrendero",
mobile: "+53555555",
phone: "+5372222222",
sms: "",
email: "fulano@nauta.cu",
madedate: "Invalid date",
clinic: "2",
gender: "M",
birthday: "Invalid date",
age: "47",
visitings: [{
id: "1",
vdate: "19/07/-2006 12:00 AM",
pdcb: "Est officia dolorem ",
vdiagnose: "Laborum Ea consecte",
vrecom: "Mollit cillum sed pe",
nextv: "Invalid date"
}],
consultas: [{
id: "1",
ldate: "04/07/-1978 12:00 AM",
lmotive: "Soluta cumque aspern",
ldiagnose: "Quidem autem do ut o",
ttest: "Rerum sint atque il",
etest: "Officiis deserunt un",
mtest: "Nihil a dolore rem s",
nextv: "Invalid date"
},
{
id: "2",
ldate: "04/04/-1991 12:00 AM",
lmotive: "Eius in est enim no",
ldiagnose: "In aliqua Sunt dol",
ttest: "Sunt dolor eu sed N",
etest: "Quia aut reprehender",
mtest: "Unde libero autem an",
nextv: "Invalid date"
}
],
isFavorite: true
}];
// Get from lS
const lS = JSON.parse(localStorage.getItem('f7Contacts'));
// DOM elements
const cancelBtn = document.getElementById('dntdelete');
const deleteBtn = document.getElementById('delete');
const consultas = document.getElementById('consultas');
const json = document.getElementById('json');
function clearConsults(){
document.getElementById('confirm').style.display="block";
{
function removeItem() {
const lS = JSON.parse(localStorage.getItem('f7Contacts'));
if (!lS) return;
const obj = lS[0];
// Find 'consultas' key in the object
const findKey = Object.keys(obj).find(key => key.includes('consultas'));
if (findKey) {
// Delete key from the object with array
delete obj[findKey];
}
// Back wraping the obj into array & put to the localStorage
localStorage.setItem('f7Contacts', JSON.stringify([obj])); //set item back into storage
}
alert('CONSULTAS ELIMINADAS');
document.getElementById('confirm').style.display="none";
if (lS[0].consultas) {
consultas.textContent = lS[0].consultas.length;
}
consultas.textContent = 0;
json.textContent = JSON.stringify(obj, undefined, 2);
}
cancelBtn.addEventListener('click', dntdelete);
deleteBtn.addEventListener('click', clearConsults);
}
});
document.getElementById('dntdelete').onclick = function(){
alert('OPERACIÓN CANCELADA');
document.getElementById('confirm').style.display="none";
return false;
};
Run Code Online (Sandbox Code Playgroud)
HTML
<main>
<div class="results">
<h4>Consultas<span id="consultas"></span></h4>
</div>
<div class="control-buttons">
<div id="confirm" style="display: none">
<button id="delete">Delete</button>
<button id="dntdelete">Cancel</button>
</div>
<a onclick="clearConsults()">Delete Consultas</a><h3>SURE YOU WANT TO DELETE?</h3>
</div>
</main>
Run Code Online (Sandbox Code Playgroud)
我必须明确指出,这个localStorage 键(f7Contacts)实际上是由应用程序中的另一个 js 存储的,如果我已经包含了localStorage.setItem("f7Contacts", JSON.stringify(contacts)); 在我上面代码的开头只是为了让你清楚。还要明确字符串中有几个联系人,任务是将consultas它们全部删除。