这两天又在折腾前端导航页面,之前那个好看不实用,这次进行了全新的改版,并把范围尽可能得缩小在前端的范围,主要包括的类别有前端工具、前端资讯、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();
}
})
|