solo un novato usando almacenamiento local. ¿Hay alguien que me puede ayudar con este problema?
Mi objetivo es cuando hago clic en el botón Listo, la entrada que hice se agrega a la clase .sNote, sin embargo, no se agrega de la forma en que quiero que sea. Sin embargo, cuando verifico mi almacenamiento local, los datos que ingresé están allí pero no se agregan realmente en mi .sNote.
¿Alguien puede ayudarme? Realmente estoy teniendo dificultades para usar el almacenamiento local porque acabo de usar esto.
Consulte este código y también puede ver mi código real aquí 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>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>' ); } Prueba esto. No ha definido las variables hrd anf para antes de la siguiente línea.
localStorage.keys(hrd, para)[i]Entonces eso causa un error. y también esa no es la forma correcta de leer el almacenamiento local. Si usa el almacenamiento local para guardar otros datos, lo mejor es usar un elemento de almacenamiento local separado que contenga una matriz de sus elementos de almacenamiento. De esa manera, no obtiene elementos innecesarios en esta iteración. Verifique Bucle a través de localStorage en HTML5 y JavaScript para obtener más detalles.
Si desea agregar esto cuando haga clic en el botón 'hecho', también es mejor mover la parte adjunta a una función como se muestra a continuación y llamarla en ambos casos.
function apendItem (key, value) { $(".sNote").append( '<div class="hrd">' + key+ '</div><div class="para">' + value + '</div>' ); }llame a las funciones anteriores desde el botón de clic como se muestra a continuación
$(".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); } });llámalo onload como se muestra a continuación
for (var i = 0; i < localStorage.length; i++) { apendItem (localStorage.key(i), localStorage.getItem(localStorage.key(i))); }