Zapisz dane dynamicznie do localStorage i załaduj te dane do tabeli html gdy .html ładuje

Question

Mam ten projekt do szkoły, muszę załadować dane z sessionStorage do tabeli html podczas ładowania mojego pliku .html (nie tylko z pamięci podręcznej).

wstawić nowe dane w sessionStorage z innego .html, muszę go zapisać dynamicznie (na przykład pierwszy wiersz moim stole jest rfc0, razon_social0, direccion_fiscal0, następny wiersz jest rfc1, razon_social1, direccion_fiscal1, etc .. .), używam tej funkcji JavaScript, żeby uratować moje dane:

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

w moim ciele onpageshow użyć tej funkcji, aby sprawdzić obsługę bagażu i wywołać dane:

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

Moi agregarDatos function() jest:

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++; 
    } 
} 

Kiedy to testuję, nie otrzymałem niczego, nawet gdy dodałem element po raz pierwszy, nie mogę określić, co jest nie tak.

Jeśli zapiszę dane bez identyfikatora, mogę dodać tylko jeden wiersz z ostatnimi przechowywanymi danymi.

P.D. Tylko ja mogę użyć JavaScript ...

Answer 1

Twój kod ma kilka błędów:

1. Aby wypełnić tabelę jesteś sprawdzając wartość sessionStorage.flag że nie jest ustawiony w dowolnym miejscu w kodzie. Ponieważ nie jest zdefiniowany, warunek if jest fałszywy, a agregarDatos() nigdy nie zostanie wywołany. Aby rozwiązać ten czek na sessionStorage.contador (jak to się robi w JSFiddle określonym poniżej)
2. W agregarDatos() pętla idzie jeden dodatkowy iteracji bo robisz conta <= i kiedy należy robić conta < i.

To byłby kod (z pewną próbą HTML i getInfo połączenia). Zmodyfikowane linie wskazał komentarze:

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>

To okno jest piaskownicy, więc nie można zobaczyć go pracy tutaj, ale można na tym JSFiddle.