jQuery Bootstrap＆amp; LocalStorage如何记住GlyphIcons的图标状态

Question

这里是小提琴：https://jsfiddle.net/pivi/ed0d7oLo/7/

1. 菜单是从数据库动态生成的（如果有人想知道为什么我的图标没有硬编码）
2. 我正在使用Bootstrap Collapse和Glyphicons

3. 我正在通过面板循环，找到顶层，为它们分配图标......并用css切换面板（打开/折叠）图标

4. 此外，我正在使用LocalStorage 来记住/恢复面板状态。

对于面板，LocalStorage工作正常..但

*问题：如何通过图标状态循环并设置LocalStorage？ 重新访问或刷新页面时，（打开/折叠）状态会丢失*

一个可能的解决方案是循环通过图标状态，获取状态，然后切换它们：

//Get the state
var activePanel = localStorage.getItem('activePanel');
[...stuff for LocalStorage...]

//Then
$('a[aria-controls="' + activePanel + '"]')
    .removeClass('collapsed')
    .attr('aria-expanded', true)
    .find('whatever').toggleClass('glyphicon-a-sign glyphicon-b-sign');

$('#' + activePanel).addClass('in');

但这是不可能的，因为我用css切换图标

主意？ ; - ）