Insertar inputs dinamicamente con Javascript (Jquery) y guardarlos en memoria

[macgrafic]

Hola,
tengo un problema y no se como solucionarlo.
el tema es que tengo un formulario y con javascript (Jquery) añado inputs con datos a un formulario.
Funciona bien, pero cuando actualizo la pagina se borran todos los inputs que he creado...

Sabes como puedo solucionar este problema?

Código Javascript:

<script type="text/javascript">
            var nextinput = 0;
            var contenedor = "";
            
            function AgregarCampos(articulo_comprado){
                nextinput++;
                var campo = '<li id="crompra'+nextinput+'">COMPRA-'+articulo_comprado+'<br /><input type="hidden" value="foto' + nextinput + '" name="item_name_' + nextinput + '"><input type="hidden" value="2.5" name="amount_' + nextinput + '"><input type="hidden" value="1" name="quantity_' + nextinput + '"><input type="hidden" value="" name="item_number"></li>';
                    
                $("#campos").append(campo);
                
                contenedor += campo;
}
        </script>
 

[maycolalvarez]

te recuerdo que lo que haces es añadir dinámicamente elementos al DOM activo, cuando recargas la página el DOM se reestablece a lo devuelto por el HTML original del servidor, por lo tanto, tienes que volver a aplicar (añadir) tales inputs.

La alternativa más viable es utilizar AJAX para hacer las peticiones (sean POST o GET) al servidor para así NO recargar la página, con ello evitas perder esos elementos añadidos al DOM