Maintaining input values with Jquery

Question

Good afternoon,

On a php page, I have several text input fields. On this page I fill each input with a value, 2,00, 3,00... How do I get these values to stay in the fields, in the inputs, even if I go to another page? Because on the other page "pull" these values to make calculations with them. Each input has an id, of course, and I am declaring them as global "window.varivel". I am not saving the values of the inputs in the database, because they simply must, can be changed at any time, as an excel cell.

Answer 1

A suggestion is to use a query string. That is, parameters passed in the URL as a GET.

In a first phase together the Ids and their values in pairs id=valor and concatenated with &:

document.querySelector('button').addEventListener('click', function () {
    var inputs = document.querySelectorAll('input');
    var queryString = [];
    for (var i = 0; i < inputs.length; i++) {
        queryString.push(inputs[i].id + '=' + inputs[i].value);
    }
    window.location = 'http://sergiofrilans.se/test/teste_SOpt.html?' + queryString.join('&');
})

and in a second phase you read this string so you can recover the values.

var qs = location.search.slice(1).split('&');
for (var i = 0; i < qs.length; i++) {
    var keyValue = qs[i].split('=');
    document.getElementById(keyValue[0]).value = keyValue[1];
}

jsFiddle and other "sandbox" prevent examples with window.location so I made an online example on my site that can be tested here. If anyone knows about another fiddle/bin tell them to put it there.