如何本地存储展开/折叠 CSS 设置答案

【问题标题】：How to local storage expand/collapse CSS settings如何本地存储展开/折叠 CSS 设置
【发布时间】：2012-10-19 17:00:04
【问题描述】：

我正在寻找使用本地存储来记住展开/折叠元素的 CSS 设置的方法

所以我的 JavaScript 看起来像这样（它获取 id 并处理展开/折叠）

function toggleHeight(id, link) {
    var e = document.getElementById(id);

    if(e.style.maxHeight == '450px') {
        e.style.maxHeight = '0px'; 
    } else {
        e.style.maxHeight = '450px';
    }
}

所以我正在寻找的是抓住 div id på 单击链接并在单击时存储更改然后在刷新时记住的东西。

【问题讨论】：

标签： javascript css html local-storage web-storage

【解决方案1】：

可能是这样的

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

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

【讨论】：

是的，我得到了这个，但不是它没有抓住 div 的高度 css 设置并将其存储为值 NULL
用“e.style.maxHeight”替换设置的项目值“height”，如下所示：存储高度，所以thx alot :) var height = localStorage.getItem(id+"-height"); localStorage.setItem(id+"-height", e.style.maxHeight);
嗯，是的，您需要在将其写入存储之前设置高度:) - 随意接受答案。
我让它与存储高度然后调用负载一起工作，在循环的帮助下，我使它尽可能简单，并且它工作得很好:)我会尽快发布我的解决方案我可以（我的声望不到 10，所以我必须等待）
好吧，只要接受一个答案，你就会得到更多的代表，所以你到了那里:)

【解决方案2】：

这里承诺的是我的解决方案：

<script type="text/javascript">
function toggleHeight(id, link) {
var e = document.getElementById(id);
var height = localStorage.getItem(id);

if(e.style.maxHeight == '450px' || e.style.maxHeight == 'inherit') {
    e.style.maxHeight = '0px'; 
    localStorage.setItem(id,"closed");
} else {
    e.style.maxHeight = '450px';
    localStorage.setItem(id, "open");
}
}

  function load() { 

var setting
var e
var link
for (x in localStorage){
    setting = localStorage.getItem(x);
    e = document.getElementById(x);
    link = document.getElementById('forumlink'+x);

    if (setting == 'open')
    {
        e.style.maxHeight = '450px';
    }
    else
    {
        e.style.maxHeight = '0px';
    }   
    }
    }

</script>

这会在单击时存储 div 的状态并设置为打开/关闭

在页面加载时，它会抓取存储的值并在打开/关闭值之后设置 max-height css..

希望其他人可以利用这个

【讨论】：

【解决方案3】：

这就是我解决它的方法：工作fiddle

//extra methods to get and set objects in staid of strings
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);
}
//fetch the object or make a new and set constant values    
var toggleState = localStorage.getObject('toggleState') || {},
    MIN_SIZE= '0px',
    MAX_SIZE= '450px';

//shown is an optional parameter
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);
}
//loop over it to set initial values
for(var i in toggleState){
    toggleHeight(i, toggleState[i]);
}

//do manual toggle, hide, show

toggleHeight('someID');

你看我把显示和隐藏分开了，所以你也可以单独显示隐藏它们，如果你愿意的话，或者你仍然可以使用切换方法。

【讨论】：

感谢您的回答让我更接近了，但最终得到了一些更简单的东西