Save dynamically data to localStorage and load this data in a html table when .html loads

Question

I got this project for school, I need to load data from sessionStorage in a html table when my .html loads (not only from cache).

I insert new data in sessionStorage from another .html, i need to save it dynamically (for example the first row of my table is rfc0, razon_social0, direccion_fiscal0, the next row is rfc1, razon_social1, direccion_fiscal1, etc...), I use this Javascript function to save my data:

function getInfo() {
    if (sessionStorage.contador){
        var i = parseInt(sessionStorage.contador);
    }
    else{
        sessionStorage.setItem('contador', "0");
        var i = parseInt(sessionStorage.contador);
    }

    var rfc = document.getElementById('RFC').value.toUpperCase(); 
    sessionStorage.setItem('rfc' + i, rfc);

    var razon_social = document.getElementById('razon_social').value;
    sessionStorage.setItem('razon_social' + i, razon_social);

    var domicilio_fiscal = document.getElementById('domicilio_fiscal').value;
    sessionStorage.setItem('domicilio_fiscal' + i, domicilio_fiscal);

    var banco = document.getElementById('banco').value;
    sessionStorage.setItem('banco' + i, banco);

    var numero_cuenta = document.getElementById('numero_cuenta').value;
    sessionStorage.setItem('numero_cuenta' + i, numero_cuenta);
    i++;
    sessionStorage.setItem('contador', i);
}

In my body onpageshow I use this function to check the Storage support and call the data:

function checkStorage() {
    if(typeof(Storage) !== "undefined") {
        if(sessionStorage.flag) {
            agregarDatos();
        }
    }
     else {
        alert('Sorry! No Web Storage support...')
    }
}

My function agregarDatos() is:

function agregarDatos() {
    var table = document.getElementById("tabla_clientes");
    var i = parseInt(sessionStorage.contador);
    var conta = 0;
    while(conta <= i){ 
        var row = table.insertRow(-1);
        var cell0 = row.insertCell(0)
        var cell1 = row.insertCell(1);
        var cell2 = row.insertCell(2);
        var cell3 = row.insertCell(3);
        var cell4 = row.insertCell(4);
        cell0.innerHTML = '<input class="check" type="checkbox" onClick="validateButton()">';
        cell1.innerHTML = sessionStorage.getItem('rfc' + conta);
        cell2.innerHTML = sessionStorage.getItem('razon_social' + conta);
        cell3.innerHTML = sessionStorage.getItem('domicilio_fiscal' + conta);
        cell4.innerHTML = '<input class="editar" type="button" value="Editar">';
        conta++;
    }
}

When I test this, got nothing even when I add an element from the first time, I can't figure what's wrong.

If I save the data without ID I can only add one row with the last data stored.

P.D. Only I can use Javascript...

Answer 1

Your code has a couple of errors:

1. In order to populate the table you are checking the value of sessionStorage.flag that is not set anywhere in your code. As it is not defined, the if condition is false and agregarDatos() will never be called. To fix this check for sessionStorage.contador (as it is done in the JSFiddle specified below)
2. In agregarDatos() the loop goes one extra iteration because you are doing conta <= i when you should be doing conta < i.

This would be the code (with some mock HTML and getInfo call). The modified lines are pointed with comments:

function getInfo() {
    if (sessionStorage.contador){
        var i = parseInt(sessionStorage.contador);
    } else {
        sessionStorage.setItem('contador', "0");
        var i = parseInt(sessionStorage.contador);
    }
    
    var rfc = document.getElementById('RFC').value.toUpperCase(); 
    sessionStorage.setItem('rfc' + i, rfc);
    
    var razon_social = document.getElementById('razon_social').value;
    sessionStorage.setItem('razon_social' + i, razon_social);
    
    var domicilio_fiscal = document.getElementById('domicilio_fiscal').value;
    sessionStorage.setItem('domicilio_fiscal' + i, domicilio_fiscal);
    
    var banco = document.getElementById('banco').value;
    sessionStorage.setItem('banco' + i, banco);
    
    var numero_cuenta = document.getElementById('numero_cuenta').value;
    sessionStorage.setItem('numero_cuenta' + i, numero_cuenta);
    i++;
    sessionStorage.setItem('contador', i);
}

function agregarDatos() {
    var table = document.getElementById("tabla_clientes");
    var i = parseInt(sessionStorage.contador);
    var conta = 0;

    // Loop from 0 to elems-1 (before it was iterating one extra time)
    while(conta < i){ 
        var row = table.insertRow(-1);
        var cell0 = row.insertCell(0)
        var cell1 = row.insertCell(1);
        var cell2 = row.insertCell(2);
        var cell3 = row.insertCell(3);
        var cell4 = row.insertCell(4);
        cell0.innerHTML = '<input class="check" type="checkbox" onClick="validateButton()">';
        cell1.innerHTML = sessionStorage.getItem('rfc' + conta);
        cell2.innerHTML = sessionStorage.getItem('razon_social' + conta);
        cell3.innerHTML = sessionStorage.getItem('domicilio_fiscal' + conta);
        cell4.innerHTML = '<input class="editar" type="button" value="Editar">';
        conta++;
    }
}

function checkStorage() {
    if(typeof(Storage) !== "undefined") {
        // sessionStorage.flag does not exist, use a value that you know will exist
        if(sessionStorage.contador) {
            agregarDatos();
        }
    }
     else {
        alert('Sorry! No Web Storage support...')
    }
}

window.onload = function() {
    console.log(1);
    checkStorage();
}

<div>
    <input type="text" id="RFC" placeholder="RFC" /><br/>
    <input type="text" id="razon_social" placeholder="Razón Social"/><br/>
    <input type="text" id="domicilio_fiscal" placeholder="Domicilio Fiscal"/><br/>
    <input type="text" id="banco" placeholder="Banco"/><br/>
    <input type="text" id="numero_cuenta" placeholder="Número de Cuenta"/><br/>
    <input type="button" value="Add to table" onclick="getInfo()"/>
</div>
<table id="tabla_clientes"></table>

That window is sandboxed so you cannot see it working on here, but you can on this JSFiddle.