将数据动态保存到 localStorage 并在 .html 加载时将此数据加载到 html 表中

Question

我为学校准备了这个项目，当我的 .html 加载时，我需要将 sessionStorage 中的数据加载到一个 html 表中（不仅来自缓存）。

我在 sessionStorage 中从另一个 .html 插入新数据，我需要动态保存它（例如我的表的第一行是 rfc0、razon_social0、direccion_fiscal0，下一行是 rfc1、razon_social1、direccion_fiscal1 等... )，我使用这个 Javascript 函数来保存我的数据：

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

在我的正文 onpageshow 中，我使用此函数来检查存储支持并调用数据：

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

我的函数 agregarDatos() 是：

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

当我对此进行测试时，即使我从第一次添加元素时也没有得到任何结果，我不知道出了什么问题。

如果我保存没有 ID 的数据，我只能添加一行存储最后一个数据。

P.D.只有我可以使用 Javascript...

Answer 1

您的代码有几个错误：

1. 为了填充表格，您正在检查代码中未设置的sessionStorage.flag 的值。由于没有定义，if 条件为假，agregarDatos() 永远不会被调用。 解决这个问题检查sessionStorage.contador（在下面指定的JSFiddle中完成）
2. 在 agregarDatos() 中，循环进行了一次额外的迭代，因为您正在执行 conta <= i，而您应该执行 conta < i。

这将是代码（带有一些模拟 HTML 和 getInfo 调用）。修改后的线用 cmets 指向：

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>

该窗口已被沙盒化，因此您无法在此处看到它正在运行，但您可以在 JSFiddle 上运行。