大家发现没，中文静网的首页居然有浏览记录，作为一个全静态托管的网站，他是怎么实现的？其实也很简单，让我们来看下代码和效果吧
1、主页：https://cnj8.com/   的javascript代码是：
if(window.localStorage){
var cnj8_his=JSON.parse(localStorage.getItem('cnj8_his'));
if(cnj8_his==null || typeof cnj8_his !='object'){cnj8_his=[];
document.getElementById("medical-recommend-list").innerHTML='无记录';
}else{
var thtml='';
for (var i = 0; i < cnj8_his.length; i++) {
thtml +='<a href="'+cnj8_his<i>['u']+'" class="bb mri2"><div class="s16 mrt3">'+cnj8_his<i>['t']+'</div></a>';
if(i>5) break;
}
document.getElementById("medical-recommend-list").innerHTML =thtml;

}
}

2、查看历史记录：https://cnj8.com/his.html     的javascript代码是：
if(window.localStorage){
var cnj8_his=JSON.parse(localStorage.getItem('cnj8_his'));
if(cnj8_his==null || typeof cnj8_his !='object'){cnj8_his=[];
document.getElementById("medical-recommend-list").innerHTML='无记录';
}else{
var thtml='';
for (var i = 0; i < cnj8_his.length; i++) {
thtml +='<a href="'+cnj8_his<i>['u']+'" class="bb mri2"><div class="s16 mrt3">'+cnj8_his<i>['t']+'</div></a>';
}
document.getElementById("medical-recommend-list").innerHTML =thtml;

}
}

3、查看收藏：https://cnj8.com/fav.html     的javascript代码是：
if(window.localStorage){
var cnj8_fav=JSON.parse(localStorage.getItem('cnj8_fav'));
if(cnj8_fav==null || typeof cnj8_fav !='object'){cnj8_fav=[];
document.getElementById("medical-recommend-list").innerHTML='无记录';
}else{
var thtml='';
for (var i = 0; i < cnj8_fav.length; i++) {
thtml +='<a href="'+cnj8_fav<i>['u']+'" class="bb mri2"><div class="s16 mrt3">'+cnj8_fav<i>['t']+'</div></a>';
}
document.getElementById("medical-recommend-list").innerHTML =thtml;

}
}

4、文章浏览：https://cnj8.com/i/28/54999.html      的javascript代码是：
var nurl=window.location.href.split('?')[0];
var ntitle=document.title.split(' - ')[0];
if(window.localStorage){
var cnj8_his=JSON.parse(localStorage.getItem('cnj8_his'));
if(cnj8_his==null || typeof cnj8_his !='object')  cnj8_his=[];
cnj8_his.unshift({'u':nurl,'t':ntitle});
for (var i = 1; i < cnj8_his.length; i++) {
if(cnj8_his<i>['u']==nurl){
cnj8_his.splice(i, 1);
break;
}
}
if(cnj8_his.length>100) cnj8_his.pop();
localStorage.setItem('cnj8_his',JSON.stringify(cnj8_his));
/*收藏*/


}

var fav_bool=false;
function is_fav(){
if(window.localStorage){
var cnj8_fav=JSON.parse(localStorage.getItem('cnj8_fav'));
if(cnj8_fav==null || typeof cnj8_fav !='object'){document.getElementById("fav").innerText='加入收藏'; return false}
for (var i = 0; i < cnj8_fav.length; i++) {
if(cnj8_fav<i>['u']==nurl){
document.getElementById("fav").innerText='取消收藏'
fav_bool=true;
break;
}
}
document.getElementById("fav").innerText='加入收藏'
}

}


function add_fav(){
if(window.localStorage){
var cnj8_fav=JSON.parse(localStorage.getItem('cnj8_fav'));
if(cnj8_fav==null || typeof cnj8_fav !='object')  cnj8_fav=[];
if(!fav_bool){cnj8_fav.unshift({'u':nurl,'t':ntitle});
fav_bool=true;
var stat=1;
document.getElementById("fav").innerText='取消收藏'
}else{
var stat=0;        
fav_bool=false;
document.getElementById("fav").innerText='加入收藏'
        }
for (var i = stat; i < cnj8_fav.length; i++) {
if(cnj8_fav<i>['u']==nurl){
cnj8_fav.splice(i, 1);
break;
}
}
if(cnj8_fav.length>100) cnj8_fav.pop();
localStorage.setItem('cnj8_fav',JSON.stringify(cnj8_fav));
}
}
is_fav();
总结：4步，简简单单就实现了本地的浏览记录缓存和收藏夹功能，大家感觉去试试吧