Q: Working with Localstorage for put content in table (JQuery) I have a big problem working with this.
I have a table in my html, in my js I'm using localstore (I have never used that before)
I insert a new row, and it is stored with localstore, I create a JSON.
For putting the ID of the raw, I just get the length of my localstorage.
For example, I have 3 rows, with IDs 1, 2 and 3.
If I decide to delete one, we can say the number 2, I can delete it, yeah, but the next time when I create a new raw I'll have the id = 2.
why?, because I use localstorage.length+1 for putting the id, so... If I had 3 before, the next time I'll get a 3, I'll replace my content where ID = 3.
what can I do for avoid that mistake?
my JS is this
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");
});

and my html have this code:
http://notes.io/wAYL
Two extra things.
1. Sorry for my bad english, If I've made a mistake is because I speak spanish, not english all the time, I need to improve my skills with the languague.
2. Also because I don't know how to put the code here. I just tried and I faild so many times.
<-- Please don't erase this -->

A: What i usually do is store whole arrays in one storage key as JSON.
When you load page you get whole array using something like:
var data = JSON.parse( localStorage.getItem('tableData') || "[]");
$.each(data, function(_, item){
   // append html to table for each item
 });

Then in your Crear() you would push the new item into the array, and store the whole array
var JSon = {
    id: +new Date(),
    matricula:$("#matricula").val(),
    nombre:$("#nombre").val(),
    sexo:$("#sexo ").val()
}
data.push(JSon);
localStorage.setItem('tableData', JSON.stringify(data));

Similar to remove an item , splice() the array to remove it from main array and store again.
One suggestion for ID is use current timestamp
