[Mario Garcia]

Estoy buscando una forma de usar el local storage para asi recordar los ajustes CSS de expandir/colapsar elemento, hasta ahora mi javascript luce como el siguiente (el cual captura e id y maneja las propiedades de expandir/colapsar)

function toggleHeight(id, link) { var e = document.getElementById(id); if(e.style.maxHeight == '450px') { e.style.maxHeight = '0px'; } else { e.style.maxHeight = '450px'; } }

Entonces lo que estoy buscando es algo que me permita capturar el id del div cuando se haga click en un enlace y almacene los cambios y que los recuerde al refrescarse.

[Julian10]

Prueba con lo siguiente:

var height = localStorage.getItem(id+"-height"); localStorage.setItem(id+"-height", height);

[Nieves Nieto]

La idea es separar los metodos de show y hide para que pueda funcionar de manera correcta, te dejo un código de como lo implemente:

Storage.prototype.setObject = function(key, value) { this.setItem(key, JSON.stringify(value)); } Storage.prototype.getObject = function(key) { var value = this.getItem(key); return value && JSON.parse(value); }
var toggleState = localStorage.getObject('toggleState') || {}, MIN_SIZE= '0px', MAX_SIZE= '450px';
function toggleHeight(id, shown) { var e = document.getElementById(id); if(shown === true || (typeof shown === "undefined" && e.style.maxHeight == MIN_SIZE)) { show(id); } else { hide(id); } }
function show(id){ var e = document.getElementById(id); e.style.maxHeight = MAX_SIZE; toggleState[id] = true; localStorage.setObject('toggleState',toggleState); }
function hide(id){ var e = document.getElementById(id); e.style.maxHeight = MIN_SIZE; toggleState[id] = false;
localStorage.setObject('toggleState',toggleState); }
for(var i in toggleState){ toggleHeight(i, toggleState[i]); } toggleHeight('algunID');​

[Mario Garcia]

Gracias Nieves, siempre con buenos ejemplos