您当前的位置： 首页 > 学无止境 > JS经典实例 网站首页JS经典实例
javascript-cookie实战应用-你可能感兴趣
发布时间：2016-12-04 14:24:34编辑：雪饮阅读（）
这次二次开发的是欣媒家政,涉及到了ajax无刷新排序,无刷新滚动加载,百度定位以及"你可能感兴趣"等功能的开发
实现原理:对每个详情页的的访问次数进行统计并按次数从大到小排序
在这里就总结下"你可能感兴趣"功能的开发心得:
下面是声明的统计当前页面访问记录的功能，初始化“你可能感兴趣”所要数据的json数组于cookie中，以及该json数组cookie的清除和该json数组cookie的加载（遍历出"你可能感兴趣"）
<script type="text/javascript">
function countcookie(){
var id={$value['id']};
var cookiearr=document.cookie.split(";");
outerloop://外层循环标示，break跳出的标示
for(var i=0;i<cookiearr.length;i++){
var jsonsy=cookiearr[i].indexOf("jsonstr");
if(jsonsy>-1){
//存在访问纪录
var jsondeng=cookiearr[i].indexOf("=");
var jsonvalue=cookiearr[i].substring(jsondeng+1);
var jsonobj=eval('('+jsonvalue+')');
var isf=0;
innerloop://内层循环标示，break跳出的标示
for(var x=0;x<jsonobj.length;x++){
//如果存在浏览id就将浏览id所对应的纪录自加，否则就直接添加新纪录
if(jsonobj[x].id==id){
jsonobj[x].num+=1;
var jsontostr=JSON.stringify(jsonobj);
document.cookie="jsonstr="+jsontostr;
alert("访问过此页面");
console.log(jsonobj);
isf=1;
break outerloop;
}
}
if(isf==0){
//如果不存在浏览id就新增纪录
var addjson={"id":id,"num":1};
jsonobj.push(addjson);
alert("json数组添加完成");
var jsontostr=JSON.stringify(jsonobj);
document.cookie="jsonstr="+jsontostr;
console.log(document.cookie);
break outerloop;
}
break;
}
else if(i==cookiearr.length-1){
//没有访问纪录
var jsonstr='[{"id":'+id+',"num":1}]';
document.cookie="jsonstr="+jsonstr;
alert("cookie创建完成");
console.log(document.cookie);
break outerloop;
}
else{continue;}
}
}
function clearcookie(){
var exp = new Date();
exp.setTime(exp.getTime() - 1);
document.cookie="jsonstr=1;expires="+exp.toGMTString();
console.log(document.cookie);
}
function readcookie(){
var cookiearr=document.cookie.split(";");
for(var i=0;i<cookiearr.length;i++){
var jsonsy=cookiearr[i].indexOf("jsonstr");
if(jsonsy>-1){
var jsondeng=cookiearr[i].indexOf("=");
var jsonvalue=cookiearr[i].substring(jsondeng+1);
var jsonobj=eval('('+jsonvalue+')');
//排序开始
var jsonlength=jsonobj.length;
var temp;
for(var i=0;i<jsonlength-1;i++){
for(var x=0;x<jsonlength-i-1;x++){
console.log(jsonobj[x].num);
y=x+1;
if(jsonobj[x].num<jsonobj[y].num){
temp=jsonobj[y];
jsonobj[y]=jsonobj[x];
//从大到小
jsonobj[x]=temp;
}
}
}
//排序结束
var ids="";
for(var a=0;a<jsonobj.length;a++){
if(a==jsonobj.length-1){ids=ids+jsonobj[a].id;}
else{ids+=jsonobj[a].id+",";}
}
$('#interest').empty();
$.ajax({
url:'index.php?i=1&c=entry&name=xm_housekeep&do=Bmxx_ajax&m=xm_housekeep',
data:{ids:ids},
type:'post',
cache:false,
dataType:'json',
async:false,
success:function(data){
var str="";
for(var d=0;d<data.length;d++){
str+="<li class='nanny' data-id='"+data[d].id+"'>";
str+="<img class='avatar' src='"+data[d].image+"' alt='avatar'>";
str+="<span class='name'><b>"+data[d].name+"</b></span>";
str+="<span class='salary' style='color:red'>参考工资:"+data[d].wage_demands+"元/月</span>";
str+="<div>";
str+="<span class='age'>"+data[d].age+"</span>岁 | ";
str+="<span>"+data[d].education+"</span>|";
str+="<span class='city'> "+data[d].temporary_residence_address+"</span>";
str+="</div>";
str+="<div>";
str+="<span class='lst_job'>"+data[d].service_type_of_work+"</span>| ";
str+="<span class='job hidden'>[1, 5]</span> ";
str+="<span>"+data[d].service_function+"</span>";
str+="<span class='skill hidden'>[1, 3]</span> ";
str+="</div>";
str+="<div>";
str+="更新时间: <span>"+data[d].time+"</span>";
str+="<i class='fa fa-location-arrow' aria-hidden='true'></i> ";
str+="<span class='distance' id='my-data-727' data-address='"+data[d].temporary_residence_address+"'>1316.9</span>km";
str+="</div>";
str+="</li>";
}
console.log(str);
if(str==""){
str="暂无数据";
}
$('#interest').append(str);
}
});
break;
}
}
}
function interest(){
countcookie();
readcookie();
}
</script>
当页面加载的时候开始初始化:
<body onload="interest();">
下面三个按钮用来调试cookie:
<input type="button" value="初始化缓存" onclick="countcookie();">
<input type="button" value="清除缓存" onclick="clearcookie();">
<input type="button" value="读取cookie创建的json数组" onclick="readcookie();">
最后用一个容器来存放“你可能感兴趣”:
<div class="col-xs-12 section">
<h4>您可能感兴趣</h4>
</div>
<ul class="list" id="interest">
正在加载。。。。。。
</ul>
关键字词：javascript,cookie,你可能感兴趣