我的.append不工作，但它保存数据在本地存储

Question

只是一个使用本地存储的新手。有人能帮我解决这个问题吗?

我的目标是当我点击完成按钮时，我所做的输入是附加在。snote类上，但它没有附加我想要的方式。然而，当我检查我的本地存储时，我输入的数据在那里，但没有真正附加在我的。snote中。

有人能帮我吗?我真的很难使用本地存储，因为我刚开始使用这个。

请看这段代码你也可以在这里看到我的实际代码https://codepen.io/rico-p-buenviaje/pen/yLXqQEB

$(document).ready(function() {
$(".aNote").on("click", function() {
var hrd = $(".iNote-items").val();
var para = $(".iNote-items-2").val();
console.log(hrd);
console.log(para);
if (hrd && para) {
localStorage.setItem(hrd, para);
}
});
for (var i = 0; i < localStorage.length; i++) {
localStorage.keys(hrd, para)[i]
$(".sNote").append(
'<div class="hrd">' + hrd[(localStorage.keys(hrd)[i])] +
'</div><div class="para">' + para[(localStorage.keys(para)[i])] + '</div>'
);
}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="iNote-inputs">
<textarea class="iNote-items" rows="3">aaaa</textarea>
<textarea class="iNote-items-2" rows="3"></textarea>
<div class="aNote">Done</div>
</div>
<div class="spl-hrd-iNote">
<div class="sNote"></div>
</div>

Answer 1

for (var i = 0; i < localStorage.length; i++) {
localStorage.key(i)
//  localStorage.keys(hrd, para)[i]

$(".sNote").append(
'<div class="hrd">' +localStorage.key(i) +
'</div><div class="para">' + localStorage.getItem(localStorage.key(i)) +'</div>'
);
}

试试这个。在以下行之前，您还没有定义hrd和para变量。

localStorage.keys(hrd, para)[i]

导致错误。这也不是读取本地存储的正确方式。如果您使用本地存储来保存其他数据，最好使用单独的本地存储项，其中包含存储项的数组。这样你就不会在这个迭代中得到不必要的东西查看在HTML5和JavaScript中循环使用localStorage

如果你想在点击'done'按钮时附加这个，最好将附加部分移动到下面的函数中，并在两种情况下调用它。

function apendItem (key, value) {
$(".sNote").append(
'<div class="hrd">' + key+
'</div><div class="para">' + value + '</div>'
);
}

点击下面的按钮调用上面的函数

$(".aNote").on("click", function(){
var hrd = $(".iNote-items").val();
var para =$(".iNote-items-2").val();


if(hrd && para) {
localStorage.setItem(hrd, para);
apendItem (hrd, para);
}
});

将其命名为onload，如下所示

for (var i = 0; i < localStorage.length; i++) {
apendItem (localStorage.key(i), localStorage.getItem(localStorage.key(i)));
}