0

Cuando hay un cambio en la estanteria osea que cambie de vacia a llena deberia guardar el cambio pero No guarda los cambios efectuados. al recragar la pagina vuelve a su estado inicial

var jQ = jQuery;
var estanteria = {};

jQ(document).ready(function(){

  jQ('.celda').each(function(){
    if(jQ(this).hasClass('llena'))estanteria[jQ(this).attr('id')] = 'llena';
    else estanteria[jQ(this).attr('id')] = 'vacia';
  });

  localStorage.setItem('estanteria', JSON.stringify(estanteria));

  jQ('body').on('click', '.celda', function(){
    var id = jQ(this).attr('id');
    estanteria = JSON.parse(localStorage.getItem('estanteria'));
    if(jQ(this).hasClass('llena')){
      estanteria[id] = 'vacia';
      jQ(this).removeClass('llena');
    }else{
      jQ(this).addClass('llena');
      estanteria[id] = 'llena';
    }
    console.log(estanteria);
    console.log(localStorage.getItem('estanteria'));
    localStorage.setItem('estanteria', JSON.stringify(estanteria))
  });

  jQ('body').on('click', '#verLocalStorage', function(){

    jQ('#contLocalStorage').html(localStorage.getItem('estanteria'));
  });

});

HTML

<div id="a" class="celda llena">1</div>
<div id="b" class="celda">2</div>

no guarda

1
  • Esto es totalmente cuestión de gustos, pero lo habitual es usar $ como alias de jQuery Commented el 5 mar. 2019 a las 15:33

2 respuestas 2

4

En este código estás sobreescribiendo siempre el localStorage:

jQ('.celda').each(function(){
    if(jQ(this).hasClass('llena'))estanteria[jQ(this).attr('id')] = 'llena';
    else estanteria[jQ(this).attr('id')] = 'vacia';
  });
localStorage.setItem('estanteria', JSON.stringify(estanteria));

Hay que revisar si el localStorage no está vacío, y recorrer el mismo en lugar del DOM si es que corresponde, de la siguiente forma:

if(typeof localStorage.getItem('estanteria') === 'undefined' || localStorage.getItem('estanteria') == null){
jQ('.celda').each(function(){
  if(jQ(this).hasClass('llena'))estanteria[jQ(this).attr('id')] = 'llena';
    else estanteria[jQ(this).attr('id')] = 'vacia';
  });
localStorage.setItem('estanteria', JSON.stringify(estanteria));
}else{
  $.each(JSON.parse(localStorage.getItem('estanteria')), function(index, value){
  if(value == 'llena')$('#'+index).addClass('llena');
});
}

Dime si tienes alguna duda.

5
  • Muchas gracias, si funciona pero si recargo 2 veces se borran los registros del LocalStorage osea que ' estanteria = {} ' Commented el 5 mar. 2019 a las 15:26
  • ¿Se borran completamente? Commented el 5 mar. 2019 a las 15:28
  • LocalStorage / ' estanteria = {} ' Commented el 5 mar. 2019 a las 15:30
  • 1
    @SaulSalazar Corregí el código, localStorage.setItem('estanteria', JSON.stringify(estanteria)); debe ir dentro del primer if, dime si eso resuelve tu problema. Commented el 5 mar. 2019 a las 15:33
  • Excelente funciona perfecto, como puedo dar recompensa? Commented el 5 mar. 2019 a las 15:36
0

El problema radica en que no cargas inicialmente lo que tienes en el localstorage. Lo que estás haciendo es que cada vez que recargas la página llenas el objeto estanteria con las celdas vacías y lo guardas. Para resolverlo tendrías que hacer algo como esto:

var estanteria = localStorage.getItem('estanteria') || {};
...

También veo que estás delegando eventos desde el body, lo cual no es un buena práctica debido a que va a escuchar cualquier click dentro del body y luego se evualuará si es que se ha hecho en un elemento con la clase celda. Podrías cambiar esto:

jQ('body').on('click', '.celda', function(){

por esto:

jQ('.celda').on('click', function(){

O si de verdad necesitar delegar eventos porque las celdas se agregan dinámicamente, podrías cambiarlo por esto:

jQ('.celda-wrapper').on('click', '.celda', function(){

Que solo escuchará lo eventos dentro del padre directo de los elementos con la clase celda. Puedes leer más sobre la delegación de eventos aquí.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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