I'm cloning some div, which are colors, but I don't want to save the information.
How can I make it save the cloned div?
I don't know if it's a script problem or what's going on. I need this function to do its job as my website is all about saving colors and then remembering those saved colors so I can use them.
Is there another function that can save the data or is local storage enough?
since I can't use php or any of those languages
$(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 taken from How to use LocalStorage with JavaScript and HTML5
Since you are using
jQuery
it, I propose the following solution:Ver ejemplo en JSBin