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