テーブル内にコンテンツを配置するためのLocalstorageでの作業（JQuery）

Question

私は大きな問題を抱えています。 私は自分のhtmlでテーブルを持っています。私はjsでlocalstoreを使用しています（以前はこれまで使用していませんでした） 新しい行を挿入し、localstoreに保存します。 生のIDを入れるために、私は自分のローカルストレージの長さを取得します。

たとえば、私はIDが1,2,3の3つの行を持っています。 私が1つを削除しようとすると、番号2と言うことができます。削除することはできますが、次回は新しく生まれたID：2を持っています。 なぜですか？idを入れるためにlocalstorage.length + 1を使用しているためです。もし前に3回、次回に3回、 ID = 3の私のコンテンツを置き換えます。 間違いを避けるために何ができますか？

http://notes.io/wAYL

2つの余分なもの：

私のJSは、この

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"); 
}); 

と私のHTMLは、このコードを持っています。 1.私の悪い英語のために申し訳ありません。私が間違いを犯したのは、常に英語ではなくスペイン語を話すことなので、スペイン語でスキルを向上させる必要があります。 2.私はここにコードを入れる方法も知らないので。私はちょうど試みたが、何度も失敗した。

< - 消去しないでください。この - >

Answer 1

私は通常、JSONのように一つの記憶の鍵で店舗全体の配列である何。

ページをロードすると、あなたのようなもの用いて全配列を取得：あなたは配列に新しいアイテムをプッシュして、配列全体

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

を格納します）（ごCrearに続いて

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

を

アイテムを削除するのと同様に、配列をsplice（）してメイン配列から削除し、再度格納します。

IDの提案は現在のタイムスタンプを使用しています