Skip to main content
Aviso eliminado Se requiere una respuesta canónica por Header90
Recompensa finalizada con Federico's answer elegida por Header90
se eliminaron 1249 caracteres en el cuerpo
Origen Enlace
Header90
  • 548
  • 3
  • 10
  • 31
/* 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>
/* 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>
  
    /* 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>
etiquetas editadas
Enlace
Header90
  • 548
  • 3
  • 10
  • 31
se añadieron 1794 caracteres en el cuerpo; título editado
Origen Enlace
Header90
  • 548
  • 3
  • 10
  • 31

Cómo evitar que el El contenido de unmi div se borreborra al cambiar de página o actualizarla (LocalStorage)actulizar la pagina aún usando local-storage

Estoy construyendo un carro de comprasTodo parece funcionar bien, sucede que la información agregadaprimero tengo que dar click en la primera páginaguardar, luego en ese div se borraañadir al visitar otra páginacarro y finalmente en la misma web.

Quisiera saber si hay alguna forma de que esos datos no se borren usando javascript LocalStorage o jquery.

He puesto todo el código que estoy usando'cargar' para ver los cambios, también quisiera saber si hay forma de conectar dos páginashasta ahí medio bien, esto paraya que el bannerlo que lleva el carro y la caja agreguen los datos de otra página,busco es decir los productos que obviamente llevantodo funcione con un solo click, una vez añadido, actualizo la misma clase.

(carropá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 compras) ejemplo.com

(Productos) productos.ejemploconstruir codigo, el cual no sé, para poder lograr lo que quiero.com

Código 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.productos'getElementById("titulo").on('click','value;
    var quanty = document.producto',functiongetElementById("cantidad").value;
 {   var price = document.getElementById("precio").value;
    var econtent = $document.createElement(this'div'); /* Div que encierra las etiquetas */
    var titleTag = document.clonecreateElement('h4'); /* Almaceno el texto del id 'titulo' */
    var identificadorquantyTag = $document.createElement(this'em'); /* Almaceno el texto de la cantidad seleccionada id 'cantidad' */
    var priceTag = document.datacreateElement('identificador''span'); /* Almaceno el texto de la id 'precio' */
    content.id = "carrito";
    if/* 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('#caja'quantyTag);
    content.findappendChild('priceTag);
    titleTag.'innerHTML += identificador)title;
    quantyTag.length)innerHTML {= quanty;
    priceTag.innerHTML = alert('Yaprice;
 fue añadido al carro'document.getElementById("box").appendChild(content);
    } else { 
    
    /* Codigo local-storage */
     /*Funcion de Capturar y Almacenar datos*/
$(edocument).appendToready('#caja'function();{    
    }$('#boton-guardar').click(function(){        
        /*Captura de datos escrito en los inputs*/        
    $    var nom = document.getElementById('#quanty'"titulo").textvalue;
        var apel = document.getElementById('Añadido"cantidad").value;
 ' + $     var ape = document.getElementById('#caja'"precio").findvalue;
        /*Guardando los datos en el LocalStorage*/
        localStorage.setItem('"Producto", nom);
        localStorage.producto'setItem("Precio", apel);
        localStorage.lengthsetItem("Caja", +ape);
 ' productos'  });   
});

/*Funcion Cargar y Mostrar datos*/
$('#quant'document).textready(function(){    
    $('#caja''#boton-cargar').findclick('function(){                       
        /*Obtener datos almacenados*/
        var producto = localStorage.producto'getItem("Producto");
        var precio = localStorage.lengthgetItem("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;
    });   
}); 
#caja .cart-content{
  background: #000;
  bottom: 0;
  position: fixed;
  right: 0;
  topheight: 0;600px;
  width: 350px;
  z-index: 90;
}

.productox49%; {
  background-color: #ddd;
 #fff;  
display: flex;
  height: 60px;
  position: fixed;
  topalign-items: 0;center;
  widthjustify-content: 100%;center;
  zflex-indexdirection: 50;column;
}
 
.carrocart-content input, .cart-content select{
width: 50%; position
margin: relative;10px;
}
 
.carro a box-content{
  font-sizewidth: 30px;90%;
 height: text90%;
background-decorationcolor: none;#ddd; 
}
 
.carro spanbox-content div{
  background-color: #fff;
  left: 5px;
  margin: auto;#f1f1f1;
  positiondisplay: absolute;flex;
  rightjustify-content: 0;
  textspace-around;
align-items: center;
   top: 1px; 
}
<link crossorigin="anonymous"<div href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"id="loop" integrity="sha384class="cart-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf"content">

 rel="stylesheet" />      <input id="titulo" type="text" value="tenis hombre" disabled>
<script src="https://cdnjs.cloudflare       <input id="precio" type="text" value="$150.com000" disabled>

        <select id="cantidad">
            <option>1</ajaxoption>
            <option>2</libsoption>
            <option>3</jqueryoption>
            <option>4</3.3.0option>
            <option>5</jquery.min.js"><option>
        </script>select>

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

    <a class="fas fa-shopping  <input id="boton-cart"guardar" href="#"onclick="guardar()" />type="button" value="guardar">
    <span class="" id="quant">0</span>  <input id="boton-cargar" type="button" value="cargar">

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

        <div id="box" class="box-content"></div> <!-- DIV DONDE SETodo INSERTANse LOSalmacena PRODUCTOSaquí -->
<div id="caja">
  <span id="quanty"></span>
 </div>

introducir la descripción de la imagen aquí

introducir la descripción de la imagen aquí

Cómo evitar que el contenido de un div se borre al cambiar de página o actualizarla (LocalStorage)

Estoy construyendo un carro de compras, sucede que la información agregada en la primera página en ese div se borra al visitar otra página en la misma web.

Quisiera saber si hay alguna forma de que esos datos no se borren usando javascript LocalStorage o jquery.

He puesto todo el código que estoy usando, también quisiera saber si hay forma de conectar dos páginas, esto para que el banner que lleva el carro y la caja agreguen los datos de otra página, es decir los productos que obviamente llevan la misma clase.

(carro de compras) ejemplo.com

(Productos) productos.ejemplo.com

Código

$(function () {
  $('.productos').on('click','.producto',function() {
    var e = $(this).clone();
    var identificador = $(this).data('identificador');

    if ($('#caja').find('.' + identificador).length) {
      alert('Ya fue añadido al carro');
    } else {
      $(e).appendTo('#caja');
    }

    $('#quanty').text('Añadido ' + $('#caja').find('.producto').length + ' productos');
    $('#quant').text($('#caja').find('.producto').length);
  });
});
#caja {
  background: #000;
  bottom: 0;
  position: fixed;
  right: 0;
  top: 0;
  width: 350px;
  z-index: 90;
}

.productox {
  background-color: #ddd;
  display: flex;
  height: 60px;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 50;
}
 
.carro {
  position: relative;
}
 
.carro a {
  font-size: 30px;
  text-decoration: none;
}
 
.carro span {
  color: #fff;
  left: 5px;
  margin: auto;
  position: absolute;
  right: 0;
  text-align: center;
   top: 1px;
}
<link crossorigin="anonymous" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>

<header class="productox">
  <div class="carro">
    <a class="fas fa-shopping-cart" href="#" />
    <span class="" id="quant">0</span>
  </div>
</header>

<!-- DIV DONDE SE INSERTAN LOS PRODUCTOS -->
<div id="caja">
  <span id="quanty"></span>
</div>

introducir la descripción de la imagen aquí

introducir la descripción de la imagen aquí

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>
Aviso añadido Se requiere una respuesta canónica por Header90
Recompensa iniciada por un valor de 50 de reputación por Header90
Mejor explicada
Origen Enlace
Header90
  • 548
  • 3
  • 10
  • 31
Loading
Loading
Origen Enlace
Header90
  • 548
  • 3
  • 10
  • 31
Loading