移动后,LocalStorage元素与视觉元素不对应

时间:2019-01-24 08:26:36

标签: javascript jquery html local-storage

我创建了一个笔记前端页面,该页面将文本字段中的数据保存到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

要体验该问题,请使用+按钮创建三个文本区域。然后在其中输入数据。此后删除后者。最后,重新加载页面,并确保出现两个文本区域。您可以看到第二个数据丢失,并用空值替换。 如何解决此问题?

The result

LocalStorage values

1 个答案:

答案 0 :(得分:2)

值“ AllNum”仅存储项目总数;它不包含有关重新加载之前存在哪些项目的任何信息。因此,在第一次加载时,如果您添加3项并删除第二项,则本地存储中的“ AllNum”将等于2,并且在下次加载时,您的load()函数将从1迭代到2,以查找数据text1text2中的第一个。这就是为什么只有第一项可以正确显示的原因。

解决上述问题后,您可能会注意到的另一个问题是,迭代不适用于唯一的id。一个简单的测试就可以证明这一点:添加3个项目,删除第二个-现在text1中有text3localStorage,而AllNum为2。如果添加2此外,最新项的ID将为3,并且其所有数据都将写入现有的text3h3之上。

关于您的代码的2条建议:

  • 使用其他名称作为唯一ID,而不是迭代编号。例如,使用Math.random()
  • 将所有唯一标识存储在localStorage中,而不要存储在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));
    }