localStorage缓存：中文静网的历史浏览记录与收藏夹是怎么实现的

婷姐 · 发表于 2023-9-23 07:29:21

马上注册，免费下载更多dz插件网资源。

您需要登录才可以下载或查看，没有账号？立即注册

×

大家发现没，中文静网的首页居然有浏览记录，作为一个全静态托管的网站，他是怎么实现的？其实也很简单，让我们来看下代码和效果吧
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步，简简单单就实现了本地的浏览记录缓存和收藏夹功能，大家感觉去试试吧

©DZ插件网所发布的一切资源仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。
网站部分内容来源于网络，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容。如果您喜欢该程序，请支持正版软件，得到更好的正版服务。
您在本站任何的赞助购买、下载、查阅、回复等行为等均表示接受并同意签订《DZ插件网免责声明协议》。
如有侵权请邮件与我们联系处理: discuzaddons@vip.qq.com 并出示相关证明以便删除。敬请谅解！

localStorage缓存：中文静网的历史浏览记录与收藏夹是怎么实现的

马上注册，免费下载更多dz插件网资源。

相关帖子

回复

More猜你喜欢

关于我们

服务支持

discuzaddons@vip.qq.com