-1

Estoy creando una página donde por medio de un formulario guardo datos en javascript y lo imprimo en la misma página adentro de un div. El problema es que cuando refresco la página se elimina ese div donde está la información. Quiero saber cómo lo puedo mantener, si llegase a refrescar la página y yo poder tener la opción de eliminar ese div con la info o bien editarlo.

2 respuestas 2

0

puede guiarte con este ejemplo  puede utilizar local storage para mantener la información

var person = { "name": "billy", "age": 23};
aqui guarda la información 
localStorage.setItem('person', JSON.stringify(person)); //stringify 
aqui muestra la información
var retrievedPerson = JSON.parse(localStorage.getItem('person')); 

2
  • pero al momento de yo guardar llenar el forms y guardarlo en la misma pagina abajo cree un card para que me apareciera esa info, con esa funcion me serviria para que no se me borre esa card ya creada donde tiene la info?
    – couch
    Commented el 27 abr. 2022 a las 21:00
  • esa información esta localStorage puede acceder con el ratón click derecho inspeccionar le das click y luego entras ventana donde dice aplications hay una parte que dice localStorage ve esto ejemplo codepen.io/empee/pen/ZeNebX codepen.io/Anupchat/pen/NWgZbW Commented el 27 abr. 2022 a las 23:22
-1

function contacto() {
    this.nombre = "";
    this.correo = "";
    this.numero = "";
    this.motivo = "";
    this.start = "";
}

var contactos = new Array();

function gi(id) {
    return document.getElementById(id);
}
function Clickparaagendartucita() {
    gi("agregar").style.display = "block";
}

function ocultarForms() {
    gi("txtNombre").value = "";
    gi("txtCorreo").value = "";
    gi("txtNumero").value = "";
    gi("txtMotivo").value = "";
    gi("start").value = "";
    gi("agregar").style.display = "none";
}

function agendarCita() {
    var con = new contacto();
    con.nombre = gi("txtNombre").value;
    con.correo = gi("txtCorreo").value;
    con.numero = gi("txtNumero").value;
    con.motivo = gi("txtMotivo").value;
    con.fecha = gi("start").value;
    contactos[contactos.length] = con;
    ocultarForms();
    mostrarContacto();
}

/*guardar datos*/


function Borrar(id_contacto) {
    
    newCon = new Array();
    for (x = 0; x < contactos.length; x++) {
        if(x !=id_contacto){
            newCon[newCon.length] = contactos[x]
        }
    }
    contactos = newCon;
    mostrarContacto();
}
function BorrarConfirmado(id_contacto){
    if(confirm("Estas seguro que deseas borras esta cita?")){
    Borrar(id_contacto);
    }
}
function editar(id_contacto){
    con = contactos[id_contacto];
    Borrar(id_contacto);
    Clickparaagendartucita();
    gi("txtNombre").value = con.nombre;
    gi("txtCorreo").value = con.correo;
    gi("txtNumero").value = con.numero;
    gi("txtMotivo").value = con.motivo;
    gi("start").value = con.start;
}
//pasar de tipo date a String
var start = new Date();
var n = start.toDateString();

function mostrarContacto() {
    gi("todosLosContactos").innerHTML = "";
    for (x = 0; x < contactos.length; x++) {
        con = contactos[x];
        div = document.createElement("div");
        div.setAttribute("class", "contacto");
        div.innerHTML =
            "Cita numero: " + x + "<br/>"+
            "Nombre: " +
            con.nombre +
            "<br/>" +
            "Correo: " +
            con.correo +
            "<br/>" +
            "Numero: " +
            con.numero +
            "<br/>" +
            "Motivo: " +
            con.motivo +
            "<br/>" +
            "fecha: " +
            n +
            "<br/>"+
            "<button onclick='editar("+x+")'>Editar</button><button onclick='Borrar("+x+")'>Eliminar</button";
        gi("todosLosContactos").appendChild(div);
    }
}
<body>  
    <script src="./js/javascri.js"></script>
    <header>
        <h1>Nursing Team</h1>
    </header>
    <nav class="Contener">
        <ul class="hijo">
            <li><a href="#agendar">Agendar cita</a></li>
            <li><a href="inicio.html">Inicio</a></li>
        </ul>
    </nav>
    <h2>Bienvenido</h2>
    <h2>Agenda para citas medicas</h2>
    <div class="img">
    <img src="img/citas.jpeg" alt="">
    </div>
        <button id="agendar" onclick="Clickparaagendartucita();" class="button">Click para agendar tu cita</button>
        <div id="agregar" style="display: none;" class="contenedor">
            <p>Agendar cita medica</p>
            <div class="texto">
            <input type="text"id="txtNombre" placeholder="Nombre Completo">
            </div>
            <div class="texto">
            <input type="text" id="txtCorreo" placeholder="Correo electronico">
            </div>
            <div class="texto">
            <input type="text" id="txtNumero" placeholder="Numero">
            </div>
            <div class="texto">
            <input type="text" id="txtMotivo" placeholder="Motivo de cita">
            </div>
            <div class="texto">
            <input type="date" id="start" placeholder="DD-MM-AAAA">
            </div>
            <button onclick="agendarCita();" class="button-uno">Agendar Cita</button>
        </div>
            <div class="afte">
            <p>Citas Agendadas</p>
            </div>
            <div id="todosLosContactos">

            </div>

</body>
</html>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.