我创建了一个笔记前端页面,该页面将文本字段中的数据保存到localStorage中。当用户使用与DeleteT
功能对应的“删除”按钮删除一个字段时,就会发生此问题。
例如,如果我们有三个id为txt1, txt2, txt3
的文本区域,则它们在localStorage中使用相同的名称包装。用户使用“删除”按钮删除txt2后,在本地存储区中左侧的文本区为txt1和txt3,但是在下一次重新加载时,有两个文本区分别为ID txt1和txt2,因为在localStorage中,文本区的数量由关键字{ {1}}。来自localStorage中txt3的数据应转到页面上DOM中的txt2。
有问题的功能:
AllNum
https://codepen.io/abooo/pen/NoqOXX?editors=1010
要体验该问题,请使用+按钮创建三个文本区域。然后在其中输入数据。此后删除后者。最后,重新加载页面,并确保出现两个文本区域。您可以看到第二个数据丢失,并用空值替换。 如何解决此问题?
答案 0 :(得分:2)
值“ AllNum”仅存储项目总数;它不包含有关重新加载之前存在哪些项目的任何信息。因此,在第一次加载时,如果您添加3项并删除第二项,则本地存储中的“ AllNum”将等于2,并且在下次加载时,您的load()
函数将从1迭代到2,以查找数据text1
和text2
中的第一个。这就是为什么只有第一项可以正确显示的原因。
解决上述问题后,您可能会注意到的另一个问题是,迭代不适用于唯一的id。一个简单的测试就可以证明这一点:添加3个项目,删除第二个-现在text1
中有text3
和localStorage
,而AllNum
为2。如果添加2此外,最新项的ID将为3,并且其所有数据都将写入现有的text3
和h3
之上。
关于您的代码的2条建议:
Math.random()
。AllNum
中。重写代码以从localStorage添加和删除唯一ID。有关如何修改2函数add()
和save()
的一个小例子:
function add() {
var newId = Math.random();
// your render logic here. Replace i with newId
save(newId);
}
function save(newId) {
localStorage.setItem("txt" + newId, document.getElementById('txt' + a).value);
localStorage.setItem("h" + newId, document.getElementById('h' + a).value);
var allIds = JSON.parse(localStorage.getItem('AllIds'));
allIds.push(newId);
localStorage.setItem("AllIds", JSON.stringify(allIds));
}