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?
/* 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>