Geek Answers Handbook

Store data dynamically in localStorage and load this data into the html table when .html loads

I got this project for school, I need to load data from sessionStorage into an html table when my .html loads (not just from the cache).

I am inserting new data into 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 onpageshow body, I use this function to check storage support and call data:

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

My agregarDatos () function:

 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 check this, I get nothing, even when I add an item the first time, I can’t understand what is wrong.

If I save the data without ID, I can add only one row with the latest data saved.

PD Only I can use Javascript ...

+5
source share
1 answer

There are several errors in your code:

  • To populate the table, you check the value of sessionStorage.flag , which is not set anywhere in your code. Since this is not defined, the if condition is false and agregarDatos() will never be called. To fix this check for sessionStorage.contador (as done in the JSFiddle below)
  • In agregarDatos() loop goes through one additional iteration because you do conta <= i when you must do conta < i .

This will be the code (with some HTML and getInfo ). Changed lines are marked 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>

This window is isolated, so you cannot see how it works here, but you can on JSFiddle .

+2
source

More articles:


All Articles