Skip to main content
5 de 7
se añadieron 1794 caracteres en el cuerpo; título editado
Header90
  • 548
  • 3
  • 10
  • 31

El contenido de mi div se borra al actulizar la pagina aún usando local-storage

Todo parece funcionar bien, sucede que primero tengo que dar click en guardar, luego en añadir al carro y finalmente en 'cargar' para ver los cambios, hasta ahí medio bien, ya que lo que busco es que todo funcione con un solo click, una vez añadido, actualizo la página y se desaparece ese div creado con javascript, no he podido encontrar solución a mi problema, me he tardado días en tratar de construir codigo, el cual no sé, para poder lograr lo que quiero. quiero saber cómo puedo solucionar esto?

/* Este script lo que hace es crear un div y también etiquetas dentro de el */
function crear() {
    var title = document.getElementById("titulo").value;
    var quanty = document.getElementById("cantidad").value;
    var price = document.getElementById("precio").value;
    var content = document.createElement('div'); /* Div que encierra las etiquetas */
    var titleTag = document.createElement('h4'); /* Almaceno el texto del id 'titulo' */
    var quantyTag = document.createElement('em'); /* Almaceno el texto de la cantidad seleccionada id 'cantidad' */
    var priceTag = document.createElement('span'); /* Almaceno el texto de la id 'precio' */
    content.id = "carrito";
    /* Añado identificadores en las etiquetas creadas para llamarlas en jquery y almacenar los datos */
    titleTag.id = "you"; 
    quantyTag.id = "mao";
    priceTag.id = "uso";
    content.appendChild(titleTag);
    content.appendChild(quantyTag);
    content.appendChild(priceTag);
    titleTag.innerHTML = title;
    quantyTag.innerHTML = quanty;
    priceTag.innerHTML = price;
    document.getElementById("box").appendChild(content);
    }   
    
    /* Codigo local-storage */
     /*Funcion de Capturar y Almacenar datos*/
$(document).ready(function(){    
    $('#boton-guardar').click(function(){        
        /*Captura de datos escrito en los inputs*/        
        var nom = document.getElementById("titulo").value;
        var apel = document.getElementById("cantidad").value;
        var ape = document.getElementById("precio").value;
        /*Guardando los datos en el LocalStorage*/
        localStorage.setItem("Producto", nom);
        localStorage.setItem("Precio", apel);
        localStorage.setItem("Caja", ape);
    });   
});

/*Funcion Cargar y Mostrar datos*/
$(document).ready(function(){    
    $('#boton-cargar').click(function(){                       
        /*Obtener datos almacenados*/
        var producto = localStorage.getItem("Producto");
        var precio = localStorage.getItem("Precio");
        var caja = localStorage.getItem("Caja");
        /* Muestro los datos en las etiquetas creadas dentro del div también creado */      
        document.getElementById("you").innerHTML = producto;
        document.getElementById("mao").innerHTML = precio;
        document.getElementById("uso").innerHTML = caja;
    });   
}); 
.cart-content{
height: 600px;
width: 49%; 
background-color: #fff; 
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.cart-content input, .cart-content select{
width: 50%; 
margin: 10px;
}
.box-content{
width: 90%;
height: 90%;
background-color: #ddd; 
}
.box-content div{
background-color: #f1f1f1;
display: flex;
justify-content: space-around;
align-items: center;    
}
<div id="loop" class="cart-content">

        <input id="titulo" type="text" value="tenis hombre" disabled>
        <input id="precio" type="text" value="$150.000" disabled>

        <select id="cantidad">
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
        </select>

        <input id="" onclick="crear()" type="button" value="Añadir al carro">

        <input id="boton-guardar" onclick="guardar()" type="button" value="guardar">
        <input id="boton-cargar" type="button" value="cargar">

    </div>
  
  
  <div class="cart-content">

        <div id="box" class="box-content"></div> <!-- Todo se almacena aquí -->

    </div>

Header90
  • 548
  • 3
  • 10
  • 31