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

Stack Overflow用户

提问于 2015-07-20 03:34:55

回答 1查看 2.1K关注 0票数 5

我为学校做了这个项目，当我的.html加载时，我需要从sessionStorage中加载数据(不仅仅是从缓存)。

我从另一个.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的数据，我只能添加一行存储的最后数据。

只有我能用Javascript..。

javascript

html-table

电商安全场景方案

帮助电商行业客户一站式解决Web安全、黑产羊毛党对抗、高危漏洞、BOT工具、恶意入侵门户服务器等安全问题

回答 1

Stack Overflow用户

回答已采纳

发布于 2015-07-20 04:37:29

您的代码有几个错误：

为了填充表，您要检查代码中没有设置的sessionStorage.flag的值。由于未定义，因此if条件为false，并且永远不会调用agregarDatos()。修复此检查sessionStorage.contador (就像在下面指定的JSFiddle中所做的一样)
在agregarDatos()中循环进行一次额外的迭代，因为您在执行conta <= i，而您应该执行conta <= i

这就是代码(带有一些模拟的超文本标记语言和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>