Add Row in jquery with Sessionstorage

Question

good afternoon I am trying to make a form where save some values using sessionStorage and when returning the code, I intend to display the values in an html table, but the numbers do not show in an exact sequence, someone already had this problem?

HTML:

<form>

    <div class="form-group">
        <label>ID:</label>
        <input type="text" class="form-control" id="idDigitado" placeholder="id" disabled>
    </div>

    <div class="form-group">
        <label>Valor:</label>
        <input type="text" class="form-control" id="valorDigitado" placeholder="valor" required>
    </div>

    <button type="button" class="btn btn-primary" id="botaoSalva">Salvar</button>

    <button type="button" class="btn btn-primary" id="exibeTabela">Exibir Tabela</button>

</form>


<div class="table-responsive">
    <table class="table table-striped tabela">
        <thead>
            <tr>
                <th>#</th>
                <th>Header</th>
            </tr>
        </thead>
        <tbody id="corpo">
            <tr id="conteudoTabela">
                <td>asf</td>
            </tr>
        </tbody>
    </table>
</div>

Javascript:

$(document).ready(function() {

    var idDigitado = 0;
    var valorDigitado = 0;
    var indiceGeral = sessionStorage.length + 1;
    $("#idDigitado").val(indiceGeral);
    $("#botaoSalva").click(function() {
        pegaCampos();
    });

    function pegaCampos() {
        idDigitado = $("#idDigitado").val();
        valorDigitado = $("#valorDigitado").val();
        $("#alerta").text(idDigitado + "-" + valorDigitado);

        salva();
    }

    function salva() {
        sessionStorage.setItem(idDigitado, valorDigitado);
        //atualizaTabela();
        atualizaIndice();
    }

    /*
    function atualizaTabela(){
        for(var i=0; i < sessionStorage.length; i++){
            var indice = sessionStorage.key(i);
            $("table").append("<tr><td>"+sessionStorage.key(i)+"</td><td>"+sessionStorage.getItem(indice)+"</td></tr>");
        }
    }
    */

    function atualizaIndice() {
        var indiceGeral = sessionStorage.length + 1;
        $("#idDigitado").val(indiceGeral);
    }

    $("#exibeTabela").click(function() {
        //$(".table").append("<tr><td>"+sessionStorage.key(i)+"</td><td>"+sessionStorage.getItem(indice)+"</td></tr>");
        var quantidadeGravada = sessionStorage.length;
        for (var i = 0; i <= quantidadeGravada; i += 1) {
            var indice = sessionStorage.key(i);
            var linha = "<tr><td>" + indice + "</td></tr>";
            $(".tabela").append(linha);

            var quantidadeLinhas = $(".tabela tbody tr").length;
            console.log(quantidadeLinhas);
        }
    });
});

Answer 1

The only problem is that you were using as the

var indice = sessionStorage.key(i);

but since Voce controls the sequential Indice in hand, you can only use the value of the variable i

var indice = i;

I created a fiddle to test, I think it’s working as expected: Session Storage solved in fiddle

Another problem I solved in fiddle but that was not in the question is that you were breaking the for from zero, which brings you values "Undefined" has to be 1 until the sessionStorage.lenght (ta fixed in fiddle also)