Keep data when click back

Question

I have a page that contains a dynamic table where the user adds new lines and then clicks on a button to calculate the order value where I direct it to a new page showing the total order value and some other information.

The problem is that when he clicks back to change some information and recalculate the lines he added do not appear, only the first that was already loaded initially when opening the page with the information he typed.

The function I’m using to add new lines is below:

AddTableRow = function () {

    var cols = "";
    var nLinhas = document.getElementsByClassName('row1').length + 1;
    var newRow = $('<tr class="row1" id="' + nLinhas + '">');

    cols += '<td class="cell"><input type="text" name="cods[]" class="cods" size="20%"><input type="hidden" name="apagado[]" value="0"></td>';
    cols += '<td class="cell"><input type="text" name="descri[]" size="40" class="descri" size="50%"></td>';
    //cols += '<td class="cell"><input type="text" name="preco[]" id="preco" size="10%" readonly="readonly" step="any" placeholder="0.00"></input></td>';
    cols += '<td class="cell"><input type="number" name="qtde[]" size="5%"></input></td>';
    cols += '<td class="cell"><input type="text" name="numoc[]" size="5%" maxlength="6"></input></td>';
    cols += '<td class="cell"><input type="text" name="itemoc[]" size="5%" maxlength="4"></input></td>';
    cols += '<td class="cell"><button onclick="RemoveTableRow(this)" type="button" size="5%">Remover</button></td>';
    cols += '</tr>';

    newRow.append(cols);
    $("#itens").append(newRow);

    return false;
};

Answer 1

I will suggest an easy method, although perhaps not ideal.

In the object window, exists the attribute history, which is a reference to your browsing history tab. You can store serializable information in this attribute. It can be a string, an array or JSON not circular, I suggest you save the internal HTML of your table.

When the user clicks on the add a new row button, invoke the replaceState method. The second argument is just a placeholder, pass an empty string to cause no error.

let tabela = document.getElementById('minha_tabela');

/*Altera o atributo value do HTML para ser o mesmo valor do JavaScript*/
for (let el of tabela.querySelectorAll('input')) {
    el.setAttribute('value', el.value);
}

/*Podesmos querer guardar mais de uma informação além da tabela, então vamos declarar um JSON para poder armazenar mais informações eventualmente*/
let historico = history.state ? history.state : {};
historico.tabela = tabela.innerHTML;

history.replaceState(historico, '');

Now you have the current state of your table in that state of navigation, when the user clicks back, you can access history.state to rebuild your table.

On the same page as the table, invoke a function like this when loading the page:

function carregaTabela() {
    /*se existir algum conteúdo no state E existir uma tabela esse if é executado, senão é ignorado*/
    if (history.state && history.state.tabela) {
        document.getElementById('minha_tabela').innerHTML = history.state.tabela;
    }
}