使用浏览器后退按钮时记住部分的折叠/展开状态

【问题标题】：Remember Collapse/Expand state of section when using browser back button使用浏览器后退按钮时记住部分的折叠/展开状态
【发布时间】：2013-05-06 16:53:36
【问题描述】：

我的网站上有几个部分。我允许查看者单独展开/折叠这些部分。这些部分使用 javascript (jquery / zepto) 扩展。（每个部分都有一个按钮可以展开或折叠。）

如果查看者离开页面查看链接的文档，然后使用浏览器的后退按钮返回，则所有部分都将折叠。

我可以将部分的状态存储在 cookie 中。但是我不认为当查看者使用后退按钮返回页面时会读取 cookie... 有没有办法记住部分的状态（展开/折叠）？

【问题讨论】：

标签： javascript jquery back expand collapse

【解决方案1】：

考虑使用 HTML5 本地存储 - 并非所有浏览器都支持它，但实现起来非常简单。

例如：

var foo = localStorage.getItem("foo");
// ...
localStorage.setItem("content", item);

在您的情况下，只需添加一行即可在该“部分”展开或折叠时更新 localStorage 中的列表：

// Inside your function:
var state = // whether the 'section' is expanded or collapsed
localStorage.setItem( state, $(this).id() );

当页面加载时

$(section).each(function () { // 'section' should target all collapsible elements
    var expanded = localStorage.getItem( $(this).id() ); // be careful here - make sure it's parsed in the correct format
    if (expanded == 1) {
        $(this).expand(); // your expand function
    } else {
        $(this).collapse(); // your collapse function
    }
});

Read up about it here

【讨论】：