如何利用js控制cookie保存浏览记录

很多商城系统都有保存用户浏览记录的功能，那么这是通过什么实现的呢？如果保存在服务器端，势必会给服务器造成不小的压力，最理想的是利用cookie保存在客户端电脑里。

最近做了一个功能，利用js控制cookie保存浏览记录。我的思路是，客户每次进入产品页面，就自己调用JS把产品信息以json的形式保存到cookie里面。浏览记录的显示是从cookies里读出来，然后解析成json，生成html元素。因为用户可能会同时打开好几个页面，这几个页面上可能都有浏览记录，为了实时显示浏览记录，设置成每秒中刷新一次。相关阅读：asp利用cookies实现商品的浏览记录

本功能需要用到两个js文件，history.js和json.js。

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存储的都是文字，占用的空间很小，而且，可以设置浏览记录的数量。不对会客户端产生压力。