Arbeiten mit Localstorage für Put-Inhalt in Tabelle (JQuery)

Question

Ich habe ein großes Problem damit zu arbeiten. Ich habe eine Tabelle in meinem HTML, in meinem js Ich benutze localstore (ich habe das vorher nie verwendet) Ich füge eine neue Zeile ein, und es wird mit localstore gespeichert, ich erstelle ein JSON. Für die ID des rohen, bekomme ich nur die Länge meines lokalen Speichers.

Zum Beispiel habe ich 3 Zeilen, mit IDs 1, 2 und 3. Wenn ich beschließen, einen zu löschen, können wir sagen, die Nummer 2, ich kann es löschen, ja, aber das nächste Mal, wenn ich ein erstellen neue rohe Ich habe die ID = 2. warum ?, weil ich localstorage.length + 1 für das Setzen der ID, also ... Wenn ich 3 vorher hatte, das nächste Mal, dass ich eine 3 bekommen werde, ich ' Ich ersetze meinen Inhalt mit ID = 3. Was kann ich tun, um diesen Fehler zu vermeiden?

meine JS ist dies

crearTabla (tablastorage)

$("#btnNuevo").on('click',function(){ 
    $("#mymodal1").modal("show"); 
    $('#btnGuardar').data('evento','crear'); 
}); 
$("#btnCargar").on('click',function(){ 
    crearTabla(tablastorage) 
}); 
$("#btnGuardar").on('click',function(){ 
    if($(this).data('evento') == "crear"){ 
     Crear(); 
     $('input:text').val(''); 
    } 
    else{ 
     Modificar(); 
    } 

$("#mymodal1").modal("hide"); 
}); 

function crearTabla(data){ 
    $("#tabla").empty(); 
    $.each(data, function(index, val){ 

     var temp = JSON.parse(val); 
     var $tr = $("<tr/>"); 
     var $tdID = crearTD(temp.id); 
     var $tdMatricula = crearTD(temp.matricula); 
     var $tdNombre = crearTD(temp.nombre); 
     var $tdSexo = crearTD(temp.sexo); 
     var $tdAccion = crearAccion(temp); 
     $tr.append($tdID, $tdMatricula, $tdNombre, $tdSexo, $tdAccion); 
     $("#tabla").append($tr); 
     $('input:text').val(''); 
    }) 

} 

function Crear(){ 

    var $tr = $("<tr/>"); 
    var $tdID = crearTD(tablastorage.length+1); 
    var $tdMatricula = crearTD($("#matricula").val()); 
    var $tdNombre = crearTD($("#nombre").val()); 
    var $tdSexo = crearTD($("#sexo").val()); 

    var JSon = { 
     id:tablastorage.length+1, 
     matricula:$("#matricula").val(), 
     nombre:$("#nombre").val(), 
     sexo:$("#sexo ").val() 
    } 
    if($('#matricula').val()=='' || $('#nombre').val()=='' || $('#sexo').val()==''){ 
     alert("Uno o mas campos vacios"); 
    } 
    else{ 
     tablastorage.setItem(tablastorage.length, JSON.stringify(JSon)) 
     var $tdAccion = crearAccion(JSon); 
     crearTabla(tablastorage) 
     $('input:text').val(''); 
    } 

}; 

function crearTD(texto){ 
    return $("<td/>").text(texto); 
}; 

function crearAccion(objeto){ 
    var $td = $("<td/>"); 
    var $div = $("<div/>",{ 
     class:'btn-group', 
     role:'group' 
    }); 

    var $btnElminar = $("<button/>",{ 
     class:'btn btn-danger eliminar' 
     }).html("<i class='glyphicon glyphicon-remove'></i>" 
      ).data('elemento',objeto); 

     var $btnModificar = $("<button/>",{ 
     class:'btn btn-info modificar' 
     }).html("<i class='glyphicon glyphicon-pencil'></i>" 
      ).data('elemento',objeto); 

    $div.append($btnElminar, $btnModificar) 
    return $td.append($div); 
}; 

$("#tabla").on('click','.eliminar',function(event){ 
    console.log($(this).data('elemento').id) 
    tablastorage.removeItem($(this).data('elemento').id-1) 
    crearTabla(tablastorage) 
}); 
$("#tabla").on('click','.modificar',function(event){ 

    index = $(this).data('elemento').id-1; 
    var $elemento = $(this).data('elemento'); 
    $('#btnGuardar').data('evento','modificar'); 
    $('#id').val($elemento.id); 
    $('#matricula').val($elemento.matricula); 
    $('#nombre').val($elemento.nombre); 
    $('#sexo').val($elemento.sexo); 
    $("#mymodal1").modal("show"); 
}); 

und meine html haben diesen Code:

http://notes.io/wAYL

Zwei zusätzliche Dinge. 1. Sorry für mein schlechtes Englisch, wenn ich einen Fehler gemacht habe, weil ich Spanisch, nicht Englisch die ganze Zeit spreche, muss ich meine Fähigkeiten mit der Sprache verbessern. 2. Auch weil ich nicht weiß, wie man den Code hier setzt. Ich habe es gerade versucht und ich habe so oft gefehlt.

< - Bitte nicht löschen diese ->

Answer 1

Was ich in der Regel speichern ganze Arrays in einem Speicherschlüssel als JSON ist.

Wenn Sie Seite laden erhalten Sie ganze Reihe etwas mit wie:

var data = JSON.parse(localStorage.getItem('tableData') || "[]"); 
$.each(data, function(_, item){ 
    // append html to table for each item 
}); 

Dann in Ihrem Crear() Sie den neuen Eintrag in das Array würde schieben, und speichern Sie das gesamte Array

var JSon = { 
    id: +new Date(), 
    matricula:$("#matricula").val(), 
    nombre:$("#nombre").val(), 
    sexo:$("#sexo ").val() 
} 
data.push(JSon); 
localStorage.setItem('tableData', JSON.stringify(data)); 

Ähnlich wie ein Element zu entfernen, splice() das Array, um es aus dem Haupt-Array zu entfernen und erneut zu speichern.

Ein Vorschlag für ID ist verwenden aktuellen Zeitstempel