Estoy intentando crear una lista que me permita mantener el checkbox y el scroll aunque se actualice la página y que cuando haga clic en un botón me cambie el color. He conseguido que se mantenga el checkbox y que me cambie el color de la caja.
Mis dudas son las siguientes para el código que he escrito: ¿cómo podría hacer?
Que se mantenga el scroll aunque se actualice la página
He conseguido mantener el checkbox y el botón. ¿Cómo hacerlo para el resto de ítems?
<style>
.caja{border:black solid 2px;
width:100px;
margin: 20px;
text-align: center;}
.caja.verde{border:black solid 2px;
background: green;
width:100px;
margin: 20px;
text-align: center;}
</style>
<body>
<div class='caja' id='caja'>PEPINO</div>
<input type='checkbox' id='0'>
<input type='number' name='cantidad' style='width: 3em'>
<button id='btncomprado'>comprado</button><br>
<div class='caja' id='caja1'>manzana</div>
<input type='checkbox' id='1'>
<input type='number' name='cantidad' style='width: 3em'>
<button id='btncomprado1'>comprado</button><br>
<div class='caja' id='caja2'>pomelo</div>
<input type='checkbox' id='2'>
<input type='number' name='cantidad' style='width: 3em'>
<button id='btncomprado2'>comprado</button><br>
<script>
var btn= document.getElementById('btncomprado'),
caja=document.getElementById('caja'),
contador=0;
function cambio()
{ if(contador==0)
{
caja.classList.add('verde');
contador=1
}
else{caja.classList.remove('verde');
contador=0;}
}
btn.addEventListener('click',cambio,true)
</script>
<script>
checkbox = document.getElementById('0')
checkbox.checked = eval(window.localStorage.getItem(checkbox.id))
checkbox.addEventListener('change', function(){
window.localStorage.setItem(checkbox.id, checkbox.checked)
})
</script>
</body>
</html>