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

Question

我在学校得到了这个项目，我需要在 html table 加载 .html 时从 sessionStorage 加载数据（不仅从缓存）。

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

在我的 body 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

您的代码有几个错误：

为了填充 table，您正在检查未在代码中任何位置设置的 sessionStorage.flag 的值。由于未定义，if 条件为假，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>

window 是沙箱化的，因此您无法在此处看到它在运行，但您可以在 JSFiddle.

上运行

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

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

javascript

html-table