利用window.localStorage实现本地收藏夹和浏览记录功能 建站心得

已认证 已通过实名认证 xiuno
管理员
官方成员
6月前 366

1、主页:https://sitename.com/   的javascript代码是:

if(window.localStorage){

var sitename_his=JSON.parse(localStorage.getItem('sitename_his'));

if(sitename_his==null || typeof sitename_his !='object'){sitename_his=[];

document.getElementById("medical-recommend-list").innerHTML='无记录';

}else{

var thtml='';

for (var i = 0; i < sitename_his.length; i++) {

thtml +='<a href="'+sitename_his['u']+'" class="bb mri2"><div class="s16 mrt3">'+sitename_his['t']+'</div></a>';

if(i>5) break;

}

document.getElementById("medical-recommend-list").innerHTML =thtml;

}

}

2、查看历史记录:https://sitename.com/his.html     的javascript代码是:

if(window.localStorage){

var sitename_his=JSON.parse(localStorage.getItem('sitename_his'));

if(sitename_his==null || typeof sitename_his !='object'){sitename_his=[];

document.getElementById("medical-recommend-list").innerHTML='无记录';

}else{

var thtml='';

for (var i = 0; i < sitename_his.length; i++) {

thtml +='<a href="'+sitename_his['u']+'" class="bb mri2"><div class="s16 mrt3">'+sitename_his['t']+'</div></a>';

}

document.getElementById("medical-recommend-list").innerHTML =thtml;

}

}

3、查看收藏:https://sitename.com/fav.html     的javascript代码是:

if(window.localStorage){

var sitename_fav=JSON.parse(localStorage.getItem('sitename_fav'));

if(sitename_fav==null || typeof sitename_fav !='object'){sitename_fav=[];

document.getElementById("medical-recommend-list").innerHTML='无记录';

}else{

var thtml='';

for (var i = 0; i < sitename_fav.length; i++) {

thtml +='<a href="'+sitename_fav['u']+'" class="bb mri2"><div class="s16 mrt3">'+sitename_fav['t']+'</div></a>';

}

document.getElementById("medical-recommend-list").innerHTML =thtml;

}

}

4、文章浏览:https://sitename.com/i/28/54999.html      的javascript代码是:

var nurl=window.location.href.split('?')[0];

var ntitle=document.title.split(' - ')[0];

if(window.localStorage){

var sitename_his=JSON.parse(localStorage.getItem('sitename_his'));

if(sitename_his==null || typeof sitename_his !='object')  sitename_his=[];

sitename_his.unshift({'u':nurl,'t':ntitle});

for (var i = 1; i < sitename_his.length; i++) {

if(sitename_his['u']==nurl){

sitename_his.splice(i, 1);

break;

}

}

if(sitename_his.length>100) sitename_his.pop();

localStorage.setItem('sitename_his',JSON.stringify(sitename_his));

/*收藏*/

}

var fav_bool=false;

function is_fav(){

if(window.localStorage){

var sitename_fav=JSON.parse(localStorage.getItem('sitename_fav'));

if(sitename_fav==null || typeof sitename_fav !='object'){document.getElementById("fav").innerText='加入收藏'; return false}

for (var i = 0; i < sitename_fav.length; i++) {

if(sitename_fav['u']==nurl){

document.getElementById("fav").innerText='取消收藏'

fav_bool=true;

break;

}

}

document.getElementById("fav").innerText='加入收藏'

}

}

function add_fav(){

if(window.localStorage){

var sitename_fav=JSON.parse(localStorage.getItem('sitename_fav'));

if(sitename_fav==null || typeof sitename_fav !='object')  sitename_fav=[];

if(!fav_bool){sitename_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 < sitename_fav.length; i++) {

if(sitename_fav['u']==nurl){

sitename_fav.splice(i, 1);

break;

}

}

if(sitename_fav.length>100) sitename_fav.pop();

localStorage.setItem('sitename_fav',JSON.stringify(sitename_fav));

}

}

is_fav();

总结:4步,简简单单就实现了本地的浏览记录缓存和收藏夹功能,大家感觉去试试吧


未登录提示:


关闭
他们喜欢这个资源
  • phoenixwxq
  • fangshang4
  • 委员长
  • xzw11111
  • wolaila
  • 大块冰糖
  • 失落的神殿
  • genemiaki
  • 后视镜里的世界
  • 88
  • 奋进
最新回复 (0)
    • Xiuno顶尖网
      2
        登陆 注册
  • 奋进
    2
     点击可以快捷回复 感谢 支持 不错 无奈 一般 生气 回帖 路过 顶帖
    表情
在线客服

特别说明

QQ客服仅提供有偿服务,如无付费意愿,请勿扰!一般问题请站内发帖咨询!
服务项目:
1,xiuno插件模板定制开发
2,xiuno网站BUG修复
3,xiuno个性化定制
4,xiuno仿站等

客服工作时间:8:00~22:00
在线客服