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

我上学的这个项目是，我的.html加载时(不仅从缓存)，我需要从sessionStorage的数据加载到html表中。

我从另一个.html将新数据插入sessionStorage中，我需要动态保存它(例如，表的第一行是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);
}

在我的页面上，我使用此功能来检查存储支持并调用数据:

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 ...

最佳答案

您的代码有两个错误:

为了填充表，您正在检查sessionStorage.flag的值，该值未在代码中的任何位置设置。由于未定义，因此if条件为false，并且永远不会调用agregarDatos()。 要修复此检查sessionStorage.contador(如在下面指定的JSFiddle中完成的操作)

在agregarDatos()中，循环进行了一次额外的迭代，因为您在应该执行conta <= i的同时正在执行conta < i。

这就是代码(带有一些模拟HTML和getInfo调用)。修改后的行带有注释:

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上工作。