0

Estoy clonando unos div, que son colores, pero no me quiere guardar la información.

¿cómo puedo hacer para que me guarde los div clonados?

no sé si es un problema del script o qué sucede. necesito que esta función haga su trabajo ya que mi web se trata de guardar colores y luego recordar esos colores guardados para poderlos usarlos.

¿Existe otra función que pueda guardar los datos o con local storage es suficiente?

ya que no puedo usar php ni ningún lenguaje de esos

$(document).ready(function(){
  $(".elegir").click(function(){
    $(".paleta-1").clone().appendTo("#welcome");
  });
});


$(document).ready(function(){    
    $('#config').click(function(){             
        var color = document.getElementById("welcome").html;
        localStorage.setItem("Paleta", color);
    });   
});


$(document).ready(function(){    
    $('#config-result').click(function(){                       
    var colors = localStorage.getItem("Paleta");
    document.getElementById("welcome").innerHTML = colors;
    });   
});
#welcome{
background: #ddd;
width: 100%;
height: 200px;
overflow: auto;
display: flex;
align-items: center;
justify-content: center;
}
.buttons{
display: flex;
}
.paleta-1{
display: flex;
}
.paleta-1 > div{
width: 50px;
height: 50px;
border-radius: 50%;
margin: 10px;
}
.box-1{
background-color: #ff0000;
}
.box-2{
background-color: #000;
}
.box-3{
background-color: #000080;
}
.box-4{
background-color: #999;
}
.box-5{
background-color: #ff0;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>

<div class='paleta-1'>
<div class="box-1"></div>
<div class="box-2"></div>
<div class="box-3"></div>
<div class="box-4"></div>
<div class="box-5"></div>
</div>

<br>

<div class="buttons">
<button class="elegir">Elegir paleta</button>
<button id="config">Save</button><br>
<button id="config-result">Load</button>
</div>

<br>

<div id="welcome"></div>

</body>
</html>

Script tomado de Cómo usar LocalStorage con JavaScript y HTML5

1 respuesta 1

2

Ya que estás usando jQuery te propongo la siguiente solución:

Ver ejemplo en JSBin

$(document).ready(function(){

    $(".elegir").click(function(){
      $(".paleta-1").clone().appendTo("#welcome");
    });

    $('#config').click(function(){
      var color = $("#welcome").html();
      localStorage.setItem("Paleta", color);
    });

    $('#config-result').click(function(){
      var colors = localStorage.getItem("Paleta");
      $("#welcome").html(colors);      
    });

  });
#welcome{
      background: #ddd;
      width: 100%;
      height: 200px;
      overflow: auto;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .buttons{
      display: flex;
    }
    .paleta-1{
      display: flex;
    }
    .paleta-1 > div{
      width: 50px;
      height: 50px;
      border-radius: 50%;
      margin: 10px;
    }
    .box-1{
      background-color: #ff0000;
    }
    .box-2{
      background-color: #000;
    }
    .box-3{
      background-color: #000080;
    }
    .box-4{
      background-color: #999;
    }
    .box-5{
      background-color: #ff0;
    }
<div class='paleta-1'>
  <div class="box-1"></div>
  <div class="box-2"></div>
  <div class="box-3"></div>
  <div class="box-4"></div>
  <div class="box-5"></div>
</div>

<br>

<div class="buttons">
  <button class="elegir">Elegir paleta</button>
  <button id="config">Save</button><br>
  <button id="config-result">Load</button>
</div>

<br>

<div id="welcome"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
2
  • Lo que dice ahí es que todo lo que se encuentra dentro de la caja con la id se guarde verdad?
    – CODEADICTO
    el 20 abr. 2019 a las 21:08
  • @CODEADICTO - Si te refieres con la id al nombre de clase paleta-1 - si el 21 abr. 2019 a las 10:36

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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