[SOLUCIONADO] Cajas de texto que no se borran

[kazukyx5]

Hola amigos

Quisiera saber como puedo colocar una caja de texto en mi pagina, donde la actualize muchas veces y esa caja de texto no pierda la informacion que tengo.

Gracias o como puedo buscar amigos.

:D

[Alexis88]

Depende. Si deseas que las cajas de texto carguen con valores predeterminados, pues, solo tienes que establecerlos:

Código HTML:

<input type = "text" value = "Aquí va el valor" />
 

Pero si buscas que estas estén vacías, el usuario ingrese datos y luego de actualizar la página estos no se borren, podrías guardarlos en cookies o localmente y cuando la página cargue, verificas si hay datos almacenados y si es que los hay, los asignas a las respectivas cajas de texto.

Código Javascript:

//Cuando haya cargado el documento, se ejecutarán las siguientes instrucciones
document.addEventListener("DOMContentLoaded", function(){
    //Si hay datos almacenados, los recupero, si no, creo un JSON para almacenarlos
    localStorage.datos = localStorage.datos || JSON.stringify({inputs: [], valores: []});
 
    //Recupero los datos almacenados o al JSON, cualquiera de ambos como un objeto
    var almacen = JSON.parse(localStorage.datos),
        elem; //Esta variable será utilizada para almacenar al <input> afectado
 
    //Cuando se escriban o borren datos en el documento, se ejecutará una función
    document.addEventListener("input", function(event){
        elem = event.target; //Tomo al <input> en el que se acaba de escribir/borrar datos
    
        //Almaceno el nombre de la caja de texto y el valor que este posee
        almacen.inputs.push(elem.name);
        almacen.valores.push(elem.value);
        localStorage.datos = JSON.stringify(almacen);
    }, false);
 
    //Cuando el documento haya cargado, verificamos si hay datos almacenados
    if (almacen.valores.length){
        //Si hay valores almacenados, procedemos a asignarlos a sus respectivos <input>
        for (var i = 0, l = almacen.valores.length; i < l; i++){
            document.querySelector("[name=" + almacen.inputs[i] + "]").value = almacen.valores[i];
        }
    }
 
    //Cuando se envíen los datos del formulario, borramos los datos almacenados
    document.querySelector("#id del form").addEventListener("submit", function(){
        localStorage.datos = JSON.stringify({inputs: [], valores: []});
    }, false);
}, false);
 

Saludos

[Rafael]

Favor de continuar este tema acá: http://www.forosdelweb.com/f18/caja-...acion-1134785/

[kazukyx5]

Iniciado por Alexis88

Genial genial geniaaal..Muchas gracias.
Gracias amigo era justo lo que necesitaba