前端笔记推出全新前端导航

 这两天又在折腾前端导航页面，之前那个好看不实用，这次进行了全新的改版，并把范围尽可能得缩小在前端的范围，主要包括的类别有前端工具、前端资讯、UX团队、前端博客、GitHub精选、前端手册和行业相关。除了对内容和样式的改版，本次还加入了最近浏览功能，在这里也简单的说一下。

    最近浏览功能

    主要思路是用localStorage或者cookie记录用户点击的信息，然后再把它显示出来。最近浏览就是类似历史记录，都是通过暂时存储信息，当用户清除记录，就不会存在了。我这里不考虑低版本浏览器，所以直接使用localStorage。

    首先记录用户点击过的信息：

$( '.wrap a' ).bind( 'click' , function (){      var  nav = $( this ).clone();      $mynav.prepend(nav); //显示在页面      localStorage[ 'mynavCookie' ] = $mynav.html(); //保存到localStorage })

    我这里简单粗暴的把整个dom元素的html保存下来，显示的时候直接塞进去。另一种思路就是保存相关信息，比如id什么的，然后读出来时再拼接显示。

    这里考虑了另外两个功能：

    1、重复的不保存并且最后访问的应该是在历史记录的最前面，这里需要新增一个变量来保存类似id的来辨别是否重复

    2、历史记录应该有限制，我这里最多保存10个，超出的就把时间最久的记录清除

    完整代码：

$( '.wrap a' ).bind( 'click' , function (){      var  nav = $( this ).clone(),          nav_index = $( this ).index(),          nav_data ,          nav_data_len ;      nav.attr( 'data-index' ,nav_index);      if (localStorage[ 'nav_index' ]){          nav_data = localStorage[ 'nav_index' ].split( '|' ),          nav_data_len = nav_data.length;      for ( var  i = 0;i < nav_data_len; i++){          if (nav_data[i] == nav_index){              $mynav.find( 'a[data-index = "' + nav_data[i] + '"]' ).remove(); //把已经存在的记录清除          }      }      }      if ($mynav.find( 'a' ).length == 10){          $mynav.find( 'a' ).eq(9).remove(); //超过10个时把最后一个记录删除      }      $mynav.prepend(nav); //把记录插入到最前面      localStorage[ 'mynavCookie' ] = $mynav.html();      if (localStorage[ 'nav_index' ]){          localStorage[ 'nav_index' ] +=  '|'  + nav_index ;      } else {          localStorage[ 'nav_index' ] = nav_index;          $( '#Jmynav' ).show();      }          })

    效果演示：http://www.w3cmark.com/mark/