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

Read up about it here

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

1 个答案: