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

Question

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

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

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

Answer 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
    }
});

在这里阅读它