Javascript 存储当前选定的选项卡，并在页面刷新后加载它

我有以下选项卡代码：

（函数（）{
$（函数（）{
var切换；
返回切换=新切换（'.toggle'）；
});
this.Toggle=（函数（）{
Toggle.prototype.el=null；
Toggle.prototype.tabs=null；
Toggle.prototype.panels=null；
函数切换（toggleClass）{
this.el=$（toggleClass）；
this.tabs=this.el.find（“.tab”）；
this.panels=this.el.find（“.panel”）；
这个。bind（）；
}
Toggle.prototype.show=函数（索引）{
var-activePanel，activeTab；
this.tabs.removeClass（'active'）；
activeTab=this.tabs.get（索引）；
$（activeTab）.addClass（'active'）；
this.panels.hide（）；
activePanel=this.panels.get（索引）；
返回$（activePanel.show（）；
};
Toggle.prototype.bind=函数（）{
var_this=这个；
返回此.tabs.unbind（'click'）.bind（'click'，函数（e）{
返回_this.show（$（e.currentTarget.index（））；
});
};
返回开关；
})();
}).打电话（这个）
.toggle{
字体系列：arial，无衬线；
}
.切换.选项卡{
边框底部：1px纯色灰色；
宽度：100%；
溢出：隐藏；
高度：36px；
线高：36px；
}
.toggle.tabs.tab{
浮动：左；
背景：白色；
颜色：#777777；
高度：31px；
保证金：2px8px0；
填充：0 8px；
光标：指针；
}
.toggle.tabs.tab.active{
颜色：#dd4b39；
边框底部：3px实心#dd4b39；
}
.切换.面板.面板{
填充：20px 10px；
显示：无；
}
.toggle.panel.panel:第一个子级{
显示：块；
}

表1
表2
表3
表4
小组1
小组2
小组3
小组4
有很多方法可以在访问页面之间“保存”信息

老式的（因此更广泛地支持浏览器）方法是使用cookie！我肯定你听说过他们：-）

第二种更现代的方法是使用本地存储。有许多库可以帮助您管理本地存储（搜索
localfound
一个），当然，您也可以自己汇总。
HTTP是无状态的。这意味着它不会保存页面的状态。当用户刷新页面时，状态消失。要保存状态，您可以尝试使用API。或者更改url哈希和页面加载时解析哈希。也就是说，没有现成的魔术可供使用。您需要编写代码来保存页面的状态。对于这样琐碎的事情，不需要本地存储库。此外，本地存储支持在2019年不是问题，这必须是一个注释：）和会话存储应该被视为我们，伙计们。。。否决票，多少？哈哈，我忘了localstorage支持可以追溯到那个时候，我确实提到过他可以使用自己的localstorage接口。另外，我没有提到sessionStorage，因为我觉得它的含义是跨会话保存。也许我错了，我应该得到否决票，但无论如何，我会坚持我的答案：-D