很多商城系统都有保存用户浏览记录的功能,那么这是通过什么实现的呢?如果保存在服务器端,势必会给服务器造成不小的压力,最理想的是利用cookie保存在客户端电脑里。
最近做了一个功能,利用js控制cookie保存浏览记录。我的思路是,客户每次进入产品页面,就自己调用JS把产品信息以json的形式保存到cookie里面。浏览记录的显示是从cookies里读出来,然后解析成json,生成html元素。因为用户可能会同时打开好几个页面,这几个页面上可能都有浏览记录,为了实时显示浏览记录,设置成每秒中刷新一次。相关阅读:asp利用cookies实现商品的浏览记录
本功能需要用到两个js文件,history.js和json.js。
- history.js用来对浏览记录的保存和读取。
- json.js用来对json数据的处理。
history.js:
var addHistory=function(num,id){ stringCookie=getCookie('history'); var stringHistory=""!=stringCookie?stringCookie:"{history:[]}"; var json=new JSON(stringHistory); var e="{num:"+num+",id:"+id+"}"; json['history'].push(e);//添加一个新的记录 setCookie('history',json.toString(),30); } //显示历史记录 var DisplayHistory=function(){ var p_ele=document.getElementById('history'); while (p_ele.firstChild) { p_ele.removeChild(p_ele.firstChild); } var historyJSON=getCookie('history'); var json=new JSON(historyJSON); var displayNum=6; for(i=json['history'].length-1;i>0;i--){ addLi(json['history'][i]['num'],json['history'][i]['id'],"history"); displayNum--; if(displayNum==0){break;} } } //添加一个li元素 var addLi=function(num,id,pid){ var a=document.createElement('a'); var href='product.action?pid='+id; a.setAttribute('href',href); var t=document.createTextNode(num); a.appendChild(t); var li=document.createElement('li'); li.appendChild(a); document.getElementById(pid).appendChild(li); } //添加cookie var setCookie=function(c_name,value,expiredays) { var exdate=new Date() exdate.setDate(exdate.getDate()+expiredays) cookieVal=c_name+ "=" +escape(value)+((expiredays==null) ? "" : ";expires="+exdate.toGMTString()); // alert(cookieVal); document.cookie=cookieVal; } //获取cookie function getCookie(c_name) { if (document.cookie.length>0) { c_start=document.cookie.indexOf(c_name + "=") if (c_start!=-1) { c_start=c_start + c_name.length+1 c_end=document.cookie.indexOf(";",c_start) if (c_end==-1) c_end=document.cookie.length //document.write(document.cookie.substring(c_start,c_end)+"<br>"); return unescape(document.cookie.substring(c_start,c_end)) } } return "" }
json.js:
var JSON = function(sJSON){ this.objType = (typeof sJSON); this.self = []; (function(s,o){for(var i in o){o.hasOwnProperty(i)&& (s[i]=o[i],s.self[i]=o[i])};})(this,(this.objType=='string')?eval('0,'+sJSON):sJSON); } JSON.prototype = { toString:function(){ return this.getString(); }, valueOf:function(){ return this.getString(); }, getString:function(){ var sA = []; (function(o){ var oo = null; sA.push('{'); for(var i in o){ if(o.hasOwnProperty(i) && i!='prototype'){ oo = o[i]; if(oo instanceof Array){ sA.push(i+':['); for(var b in oo){ if(oo.hasOwnProperty(b) && b!='prototype'){ sA.push(oo[b]+','); if(typeof oo[b]=='object') arguments.callee(oo[b]); } } sA.push('],'); continue; }else{ sA.push(i+':'+oo+','); } if(typeof oo=='object') arguments.callee(oo); } } sA.push('},'); })(this.self); return sA.slice(0).join('').replace(/\[object object\],/ig,'').replace(/,\}/g,'}').replace(/,\]/g,']').slice(0,-1); }, push:function(sName,sValue){ this.self[sName] = sValue; this[sName] = sValue; } }
示例程序:
<script type="text/javascript" src="/js/json.js"></script> <script type="text/javascript" src="/js/history.js"></script> <ul id="history"> </ul> <script> addHistory(20165212,2); addHistory(201612025,2); addHistory(6843212,2); addHistory(654825,2); setInterval("DisplayHistory()",1000); </script>
cookie存储的都是文字,占用的空间很小,而且,可以设置浏览记录的数量。不对会客户端产生压力。
声明:如需转载,请注明来源于www.webym.net并保留原文链接:http://www.webym.net/jiaocheng/198.html