Javascript 移动后LocalStorage元素与可视元素不对应

我创建了一个记录笔记的前端页面，它将文本字段中的数据保存到localStorage中。当用户使用与

DeleteT

功能对应的Delete按钮删除一个字段时，就会出现问题

例如，如果我们有三个id为

txt1、txt2、txt3

的文本区域，则它们在本地存储中的名称相同。用户使用Delete（删除）按钮删除例如txt2后，在本地存储器中，左边的是txt1和txt3，但在下一次重新加载时，有两个id为txt1和txt2的文本区域，因为在本地存储器中，文本区域的数量是通过键

AllNum

保存的。本地存储中txt3的数据应转到页面上DOM中的txt2

有问题的功能：

// Deletes textelemnt
function DeleteT(num) {
        localStorage.removeItem("txt" + num);
        localStorage.removeItem("h" + num);
        console.log('del');
        i=i-1;
        var now = localStorage.getItem("AllNum");
        if((now-1)<0){
            now=0;
                    localStorage.setItem("AllNum", (0));

        }else{
            localStorage.setItem("AllNum", (now-1));
        }
        $("div.textarea" + num).remove();
    }
//Loads all the text elemnts with a for loop until the number of areas is reached
function load() {
        if (document.getElementById("alltxt").childElementCount < localStorage.getItem('AllNum')) {
            for (var i = 1; i <= localStorage.getItem('AllNum'); i++) {
                $('#alltxt').append('<div class="textarea' + i + '"><input onkeyup="save()" id="h' + i + '"></input><textarea onkeyup="save()" id="txt' + i + '"></textarea></br><button onClick="cut(txt' + i + ')" class="f b">Cut</button>        <button onClick="copy(txt' + i + ')" class="f b">Copy</button>              <button onClick="speak(txt' + i + ')" class="f b">Speak</button>        <button onClick="download(' + i + ')" class="f a">Save</button><button onClick="textFull(' + i + ')" class="f">Fullscreen</button> <button onClick="DeleteT(' + i + ')" class="f">Delete</button> </div>');
                document.getElementById('txt' + i).innerHTML = localStorage.getItem("txt" + i);
                document.getElementById("h" + i).setAttribute('value', localStorage.getItem("h" + i));
            }
        }
    }

//删除textelemnt
函数DeleteT（num）{
localStorage.removietem（“txt”+num）；
localStorage.removietem（“h”+num）；
console.log（'del'）；
i=i-1；
var now=localStorage.getItem（“AllNum”）；
如果（（now-1）值“AllNum”仅存储项目总数；它不包含任何关于在重新加载之前存在哪些项目的信息。因此，在第一次加载中，如果添加3个项目并删除第二个项目，则本地存储的“AllNum”将等于2，下次加载时，
load（）
函数将从1迭代到2，查找
text1
和
text2
的数据。这就是为什么只有第一项显示正确

解决上述问题后，您可能会注意到的另一个问题是迭代不适合唯一id；一个简单的测试可以证明这一点：您添加了3项，删除了第2项-现在您在
localStorage
中有
text1
和
text3
，并且
AllNum
是2。如果您再添加一项，最新的项的id将为3及其所有数据将写入现有的
text3
和
h3
之上

2对您的代码的建议：


使用其他内容作为唯一id而不是迭代编号。例如，使用
Math.random（）
将所有唯一ID存储在localStorage中，而不是
AllNum
。重写代码以添加和删除localStorage中的唯一ID

如何修改2函数
add（）
和
save（）
的一个小示例：

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

解决上述问题后，您可能会注意到的另一个问题是迭代不适合唯一id；一个简单的测试可以证明这一点：您添加了3项，删除了第2项-现在您在
localStorage
中有
text1
和
text3
，并且
AllNum
是2。如果您再添加一项，最新的项的id将为3及其所有数据将写入现有的
text3
和
h3
之上

2对您的代码的建议：


使用其他内容作为唯一id而不是迭代编号。例如，使用
Math.random（）
将所有唯一ID存储在localStorage中，而不是
AllNum
。重写代码以添加和删除localStorage中的唯一ID

如何修改2函数
add（）
和
save（）
的一个小示例：

您在两个函数中使用相同的var（i）可能这就是问题所在。为什么在DeleteT中使用
i=i-1；
？保存函数的代码在哪里？我猜，您在保存函数中设置了i。我尝试删除i=i-1，这似乎不会导致问题您在两个函数中使用相同的var（i）也许这就是问题所在。为什么DeleteT中的
i=i-1；
以及save函数的代码在哪里？我猜，您在save函数中设置了i。我尝试删除i=i-1，但似乎没有导致问题。我如何使用Math.random（）要将localStorage数据与可视元素关联？感谢您的帮助。在实现代码后，我遇到了一个奇怪的错误。您知道如何修复它吗？未捕获类型错误：无法读取null@Atanas
AllIds
的属性“push”在第一次页面加载时在localStorage中为空。您可以在页面加载时执行检查，并使用
JSON.stringify（[]）
我以前从未使用过JSON，请原谅我的问题。if（localStorage.getItem（'AllIds'）==null）{JSON.stringify（localStorage.setItem（“AllIds”），“（）”；}此代码似乎没有建立值。@Atanas否您不存储JSON。再次检查我的代码，我将数组转换为字符串并存储它。如何使用Math.random（）要将localStorage数据与可视元素关联？感谢您的帮助。在实现代码后，我遇到了一个奇怪的错误。您知道如何修复它吗？未捕获类型错误：无法读取null@Atanas
AllIds
的属性“push”在第一次页面加载时在localStorage中为空。您可以在页面加载时执行检查，并使用
JSON.stringify（[]）
我以前从未使用过JSON，请原谅我的问题。如果（localStorage.getItem（'AllIds'）==null）{JSON.stringify（localStorage.setItem（'AllIds'，“（）”）；}这段代码似乎没有建立值。@不，你不存储JSON。再次检查我的代码，我将数组转换为字符串并存储它。
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));
    }