2

Olá! tenho uma tabela com alguns campos inputs, que precisam ser preenchidos antes de o usuário o submeter, porém, precisava que estes dados preenchidos se mantivessem após ser enviado, mesmo após a pagina ser fechada. Estou realmente com dificuldade de implementar esta logica.

Código HTML

<DOCTYPE HTML>
<html lang="pt-br">
    <head>
        <meta charset="UTF-8">
        <script src="jquery.min.js"></script>
        <script src="json2.js"></script>
        <script src="jquery.alphanumeric.pack.js"></script>
        <script src="java.js"></script>
        <link rel="stylesheet" type="text/css" href="folha.css" />
    </head>
    <body>
        <center><b><font size="4" color="#FF0000">PEDIDO DE COTAÇÃO</font></b></center><br>
        <table id="dados">
            <thead>
                <tr>
                    <th id="td_titulo"></th>
                    <th>Descrição</th>
                    <th>Unidade</th>
                    <th>Fabricante</th>
                    <th>Cód. Fabricante</th>
                    <th>Outros Códigos</th>
                    <th>Quantidade</th>
                    <th>Valor Unitário</th>
                    <th>Ações</th>
                </tr>
            </thead>
        <tbody>
                <tr>
                    <td class="pedido">5524</td>
                    <td>PRODUTO 1</td>
                    <td>PC</td>
                    <td>FABRICANTE 1</td>
                    <td>SAE014J/010</td>
                    <td id = "colOriginal">12168</td>
                    <td>1</td>
                    <td><input type="text" name="5060" class="valor"/></td>
                    <td colspan="5" style="text-align: center;">
                    <button class="add" onclick="AddTableRow(this)" type="button" 
                            data-toggle="tooltip" 
                            data-placement="top" 
                            title="Adicione uma nova peça similar">+
                    </button>
                    </td>
                </tr>
                <tr>
                    <td class="pedido">5518</td>
                    <td>PRODUTO 2</td>
                    <td>PC</td>
                    <td>FABRICANTE 2</td>
                    <td>SAE100P/000</td>
                    <td id = "colOriginal">34816 / MLSAE100P000 / 31174 / 3701</td>
                    <td>2</td>
                    <td><input type="text" name="3088" class="valor"/></td>
                    <td colspan="5" style="text-align: center;">
                    <button class="add" onclick="AddTableRow(this)" type="button"
                            data-toggle="tooltip" 
                            data-placement="top" 
                            title="Adicione uma nova peça similar">+
                    </button>
                </tr>
            </tbody>
        </table>
        <br><center><b><font size="2">INFORMAÇÕES EXTRAS</font></b><br></center><br>
        Prazo de Entrega (dias): <input type="text" name="prazo" class="iprazo" size="3" maxlength="3"/>
        Frete (R$): <input type="text" name="frete" class="ifrete" size="5" maxlength="9"/>
        <br><br>
        Observação:<br><br>
        <textarea name="obs" rows="4" style="min-width: 100%" class="tobs"></textarea>
        <br>
        <br><center><input type="button" class="Cenviar" value="Enviar" name="" id="00007667"/></center><br>
        <div class="resultado"></div>
        <br><center><b><font size="4" color="#FF0000">29/04/2019 07:13:08</font></b></center><br>
    </body>
</html>

Código javascript

var i,json,pedido,cont,codigo = new Object, linhasDaTabela = new Array(), lPedidos = new Array();

$(document).ready(function() {
    $(".pedido").hide();
    $("#td_titulo").hide();

    $('.valor').numeric({allow:","});

    //codigo.Fornecedor = $(".Cenviar").attr("id");
    //codigo.Cliente = $(".Cenviar").attr("id");

    pedido = "";
    cont = 0;

    for (i=0;i<$(".pedido").length;i++) {
        if (pedido != $(".pedido")[i].innerHTML) {
            lPedidos[cont] = new Object();
            lPedidos[cont].CodPedido = $(".pedido")[i].innerHTML;
            lPedidos[cont].CodFornecedor = $(".Cenviar").attr("id");
            pedido = $(".pedido")[i].innerHTML;
            cont = cont + 1;

        }

    }

    $.ajax({
        type : "POST",
        contentType : "application/json; charset=utf-8",
        url : "buscar.php",
        data : JSON.stringify(lPedidos),
        success : function(data){
            if (data) {
                var JsonArray = JSON.parse(data);
                $.each(JsonArray, function(key,value){



                    for (i=0;i<$(".valor").length;i++) {
                        if ($(".valor")[i].name == value.cod_pecas) {
                            $(".valor")[i].value = value.valor;

                            if (i===0) {
                            if($(".add")[i].click());
                            }


                        }
                    }

                    if ($(".iprazo")[0] !== undefined) {

                        if ($(".iprazo")[0].name == "prazo") {

                            $(".iprazo")[0].value = value.prazoentrega;

                        }

                    }

                    if ($(".ifrete")[0] !== undefined) {

                        if ($(".ifrete")[0].name == "frete") {

                            $(".ifrete")[0].value = value.vlrfrete;

                        }

                    }

                    if ($(".tobs")[0] !== undefined) {
                        if ($(".tobs")[0].name == "obs") {

                            $(".tobs")[0].value = value.obs;

                        }

                    }

                });

            }

        } 

    });

    $(".Cenviar").click(function() { 

    var j = 0;
    var CodPecasTemp = '';
    var bEntrar = false;

    for (i=0;i<$(".valor").length;i++) {

            linhasDaTabela[i] = new Object();
            linhasDaTabela[i].CodFornecedor = $(".Cenviar").attr("id");
            linhasDaTabela[i].CodPedido = $(".pedido")[i].innerHTML;
            linhasDaTabela[i].valor = $(".valor")[i].value;
            linhasDaTabela[i].CodPeca = $(".valor")[i].name;

            bEntrar = CodPecasTemp === $(".valor")[i].name;

            if ($(".fab")[j] !== undefined && bEntrar) {

               linhasDaTabela[i].Fabricante = $(".fab")[j].value;

            } else {
               linhasDaTabela[i].Fabricante = "";
            } 

            if ($(".codFab")[j] !== undefined && bEntrar) {
               linhasDaTabela[i].CodFabricante = $(".codFab")[j].value;
               j++;
            } else {
               linhasDaTabela[i].CodFabricante = "";
            } 

            if ($(".quantidade")[i] !== undefined) {
               linhasDaTabela[i].Quantidade = $(".quantidade")[i].value;
            } else {
               linhasDaTabela[i].Quantidade = "";
            }       

            if ($(".ifrete")[0] === undefined) {
                linhasDaTabela[i].vlrfrete = 0;
            } else {
                linhasDaTabela[i].vlrfrete = $(".ifrete")[0].value;
            }

            if ($(".iprazo")[0] === undefined) {
                linhasDaTabela[i].prazoentrega = 0;
            } else {
                linhasDaTabela[i].prazoentrega = $(".iprazo")[0].value;
            }
            if ($(".tobs")[0] === undefined) {
                linhasDaTabela[i].obs = "";
            } else {
               linhasDaTabela[i].obs = $(".tobs")[0].value; 
            }

            CodPecasTemp = $(".valor")[i].name;

    }

    $.ajax({
        type : "POST",
        contentType : "application/json; charset=utf-8",
        url : "data.php",
        data : JSON.stringify(linhasDaTabela),
        success : function(data) {
                $(".resultado").html('<center>'+data+'</center>');
        }

    });


  });
   (function($) {  
    AddTableRow = function(btn) {
    var newRow = $("<tr>");
    var cols = "";
    var valorName = $(btn).closest("tr").find(".valor").attr("name").trim();
    cols += '<td class="pedido" style="display: none;">&nbsp;</td>'
    cols += '<td class="descricao">&nbsp;</td>';
    cols += '<td class="unidade">&nbsp;</td>';
    cols += '<td><input type="text" class="fab"/></td>';
    cols += '<td><input type="text" class="codFab"/></td>';
    cols += '<td>&nbsp;</td>';
    cols += '<td class="quantidade">&nbsp;</td>';
    cols += '<td><input type="text" name='+valorName+' class="valor"/></td>';
    cols += '<td>';
    cols += '<button class="remover" onclick="RemoveTableRow(this)" type="button" data-toggle="tooltip" title="Clique para remover a linha">-</button>';
    cols += '</td>';

    $(newRow).append(cols);

    $(newRow).insertAfter($(btn).closest('tr'));

    // pega o texto da 1ª coluna
    var codPed = $(btn).closest("tr").find("td:eq(0)").text().trim();
    // pega o texto da 2ª coluna
    var desc = $(btn).closest("tr").find("td:eq(1)").text().trim();
    // pega o texto da 3ª coluna
    var unid = $(btn).closest("tr").find("td:eq(2)").text().trim();
    // pega o texto da 6ª coluna
    var qtde = $(btn).closest("tr").find("td:eq(6)").text().trim();

    $(btn) // botão clicado
    .closest("tr") // linha pai
    .next() // próxima linha
    .find(".descricao") // busca pela classe
    .text(desc) // adiciona o texto
    .end() // volta para o .next()
    .find(".pedido")
    .text(codPed)
    .end()
    .find(".quantidade")
    .text(qtde)
    .end()
    .find(".unidade")
    .text(unid);

    return false;
    };
})(jQuery);

(function($) {    
    RemoveTableRow = function(item) {       
        var tr = $(item).closest('tr'); 

        tr.fadeOut(400, function() {          
        tr.remove();        
      });   

    return false;     
    }   
})(jQuery);

});

Toda ajuda é bem vinda, desde já agradeço.

2
  • a atributo value="" é quem armazena esta informação, vou te ajudar com isto.
    – user148170
    28/08/2019 às 13:04
  • Poderia usar localStorage.
    – Sam
    28/08/2019 às 13:08

2 Respostas 2

4

Pode usar localStorage para salvar o HTML. O localStorage é uma espécie de cache gerado pelo JavaScript no navegador que fica de forma permanente. Mesmo fechando o navegador você pode recuperar os dados salvos nele.

Coloque o conteúdo que você quer salvar dentro de uma div com um id, por exemplo:

<body>
   <div id="conteudo">
      // CONTEÚDO DA PÁGINA QUE QUER SALVAR
   </div>
</body>

No início do evento click onde você submete os dados via AJAX, coloque o código que irá ajustar os valores dos inputs e do textarea para que sejam salvos no localStorage em forma de HTML:

$(".Cenviar").click(function() {

   // percorre cada input e textarea
   $("#conteudo input, #conteudo textarea").each(function(){
      var t = $(this);
      if(t.prop("tagName") == "INPUT"){
         t.attr("value", t.val());
      }else if(t.prop("tagName") == "TEXTAREA"){
         t.html(t.val());
      }
   });

   localStorage.setItem("dados", $("#conteudo").html()); // salva o HTML da div no localStorage

   // resto do código que já existe
});

Agora, dentro do seu $(document).ready(function() { você irá verificar se o localStorage existe. Se ele existir, você irá substituir o conteúdo da div #conteudo pelo que foi salvo, com os dados preenchidos nos campos e tudo:

var locSto = localStorage.getItem("dados");
if(locSto) $("#conteudo").html(locSto);

Pronto. Caso queira em algum momento remover o localStorage, basta executar:

localStorage.clear();
6
  • Sam, tem certeza que LocalStorage é um cookie? Pergunto porque um cookie é enviado a cada requisição para ser lido no servidor, enquanto LocalStorage só pode ser lido no cliente. 28/08/2019 às 14:44
  • Sim, é um cookie de armazenamento local: i.stack.imgur.com/wRi62.png
    – Sam
    28/08/2019 às 14:48
  • Mas isso é uma nomenclatura usada pelo software. No Firefox é mostrado separado: imgur.com/a/6LPMyS7. O que quero dizer é que conceitualmente não é um cookie 28/08/2019 às 14:51
  • Pode ser. Como eu uso o Chrome e ele trata o localStorage como um cookie, eu acabei me acostumando com o nome rss... mas eu alterei os nomes na resposta. Valeu!
    – Sam
    28/08/2019 às 14:54
  • Menos mal.. já tava achando que eu tinha aprendido alguma coisa errada. :D 28/08/2019 às 14:55
2

Você pode utilizar LocalStorage.

Colocar no OnLoad da página a chamada para uma função que carrega as informações armazenadas no LocalStorage:

<body onload="Carregar();">

A função Carregar(); pega as informações armazenadas em um localstorage e coloca no input:

function Carregar(){
   document.getElementById("nome").value = localStorage.getItem("nome");
}

Criar um button e anexar uma função que salva a informação digitada no input em um localstorage:

<button type="button" onclick="Salvar();">Salvar</button>

A função Salvar(); pega o que foi digitado no input e coloca em um localstorage com um id para ser utilizado depois:

function Salvar(){
    localStorage.setItem("nome",document.getElementById("nome").value);
} 

Segue o código completo:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body onload="Carregar();">
    <input id="nome"><button type="button" onclick="Salvar();">Salvar</button>

    <script>
        function Salvar(){
            localStorage.setItem("nome",document.getElementById("nome").value);
        }

        function Carregar(){
            document.getElementById("nome").value = localStorage.getItem("nome");
        }
    </script>
</body>
</html>
2
  • Muito obrigado pela ajuda. 28/08/2019 às 17:28
  • ótima solução com jS puro e funciona!! 25/09/2023 às 0:16

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .