如何实现侧边栏高亮？

大家好，我是IT修真院深圳分院第九期的学员徐炜，一枚正直纯洁善良的前端程序员。今天给大家带来的是如何实现侧边栏高亮？

一.背景介绍

     侧边栏高亮是指选择侧边栏菜单时有一个样式效果,当刷新页面的时候,这个效果还在。侧边栏高亮有很多种实现方法,根据任务6-10要求,最后用双ng-repeat嵌套的方法，渲染一二级菜单。

二.知识剖析  

     1、sessionStorage和localStorage：localStorage生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息， 否则这些信息将永远存在。存放数据大小为一般为5MB,而且它仅在客户端（即浏览器）中保存，不参与和服务器的通信。sessionStorage仅在当前会话下有效，关闭页面或浏览器后被清除。存放数据大小为一般为5MB,而且它仅在客户端（即浏览器）中保存， 不参与和服务器的通信。

      2、ng-class：ng-class 指令用于给 HTML 元素动态绑定一个或多个 CSS 类，其值可以是字符串，对象，或一个数组。如果是字符串，多个类名使用空格分隔。如果是对象，需要使用 key-value 对，key 为你想要添加的类名，value 是一个布尔值。只有在 value 为 true 时类才会被添加。如果是数组，可以由字符串或对象组合组成，数组的元素可以是字符串或对象。

      3、ng-repeat：ng-repeat 指令用于循环输出指定次数的 HTML 元素，集合必须是数组或对象。

三.常见问题

  如何实现侧边栏高亮，且刷新页面后保持不变？

四.解决方案

  在前面的任务2-4中,我们已经学到了sessionStorage和localStorage, 同理我们也可以使用这两个网页存储的功能结合ng-class一起实现侧边栏的高亮效果。

五.编码实战

 实战演示demo，详见视频。

六.扩展思考

七.参考文献

参考一：AngularJS ng-repeat 指令；

参考二：AngularJS ng-class 指令；

参考三：angularjs 本地数据存储LocalStorage；

八.更多讨论

问题一：还有什么方法存储高亮状态？

答：可以使用$ stateParames，在URL中存取状态。

问题二： 不用localStorage保存，用sessionStorage来保存可以吗？

答：可以的，根据需求，看看是否需要关闭浏览器后依旧保存来选择。

问题三：ng-class怎么来判断条件?

答：ng-class可以用三目运算符来进行判断。

 PPT 视频链接

  感谢冯亚超、和黄苏威师兄，此教程是在他们之前技术分享的基础上完善而成。 

  今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~