Mantener estado botón con localstorage

treasure · #1 (**permalink**) 03/03/2016, 05:40

Hola a todos,
Voy a plantear un problema que tengo a ver si algún alma caritativa me puede echar un cable.

He creado un sistema de favoritos con localstorage y jquery para que al guardar un favorito, éste se conserve incluso cuando el usuario ha cerrado el navegador. El problema viene porque quiero deshabilitar el botón de crear favorito cuando éste se haya creado para no crear el mismo favorito más de una vez y recuperar el estado inicial del botón cuando se elimina el favorito.

Os pongo el código que seguro lo vais a entender mejor:

Código:

<html>
<head>

<title>Marcadores</title>

<script src="js/jquery-1.11.3.js" type="text/javascript"></script>
<script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>



<script>
$(document).ready(function() {
  var $ul = $('#bookmarks');

  //get items from local storage
  if(localStorage.getItem('links')){
   $ul.html(localStorage.getItem('links'));
  }

  $('#cita01').click(function () {
    $('#bookmarks').append('<li><a href="#">Esta es la cita número 1</a><button class="eliminar01">remove</button></li>');
    localStorage.setItem('links', $ul.html());
    $("#cita01").attr('disabled', true);
  });


  //remove item
  $("#bookmarks").on('click','.eliminar01',function () {
      if (confirm("¿Estás seguro de eliminar este favorito?")) {
        $(this).parent().remove();
        //save changes to localstorage
        localStorage.setItem('links', $ul.html());

        $("#cita01").attr('disabled', false);
    }   
    return false;
  });
});
</script>


<style>
#cita01{
    width: 60px;
    height: 40px;
    background: green;
}

.eliminar01{
    width: 60px;
    height: 40px;
    background: red;
}

</style>

</head>

<body>

<div class="wrapp">

    <h1>Bookmarks</h1>
    <ul id="bookmarks"></ul>
    </div>

    <div id="grupo">
        <h1>Quotes</h1>

        <div class="quote">
            <p>L isjf sldzh valshlsah akuhcEbitat ut la soluptatem re sequae nis commodit re volori res atium aliquunt utas apediti qui tetus cus, consedi ctotatem quod es mollabo restibe rchiti ressit hiti officie nimolup.</p>
        <button id="cita01">Add</button>
        </div>

 </div>
</body>
</html>

Como veis, he usado

Código:

$("#cita01").attr('disabled', true);

y

Código:

$("#cita01").attr('disabled', false);

pero no me funciona porque al cerrar el navegador y volverlo a abrir, el botón queda habilitado aunque se mantenga el favorito; es decir, no se guarda el estado del botón (disabled) en localstorage.

Muchas gracias!!!

eliaslunaslo · #2 (**permalink**) 07/03/2016, 15:57

Esto no deberia ir en javascript?