最近在做一个购物车效果，为了实现商品的浏览记录效果可是让我百般周折，避免以后忘记特写此随笔与大家共享，希望博友们看后有所收获。
第一步：在一个公用的js文件下getCookie（“liulan”）,cookie名字可以随便起,然后在判断是否存在此cookie,不存在的话创建此cookie,存在的话将次cookie赋给window.liu(整个窗口唯一的变量)。代码如下：
var l = getCookie("liulan"); if(l){window.liu = l }else{setCookie("liulan",[ ],10);}
第二步：将第一步中的js文件引入到商品页，引入完后在商品页判断是否存在window.liu,如果存在window.liu(此时的liu是一个数组)判断liu的长度是否大于0，如果大于0就创建一个数组并且循环遍历liu,将liu的每一项添加到数组中且动态创建记录的商品显示到该加载的地方。代码如下：
if(window.liu){
var liu = window.liu;
if(liu.length>0){
var arrObj = [ ];
for(var j=liu.length-1; j>=0; j--){
var l = liu[ j ];
arrObj.push("<li id=' "+l.id+" '><img src='img/"+l.img+" '/><h4>￥"+l.price+"元/件</h4><span>"+l.title+"</span></li>");
}
$('ol').html(arrObj.join(""));//显示加载的时候以空字符分开
$('li','ol').click(function(){ });//给每个li设置点击事件
}
}
第三步：当浏览商品时给商品添加一个事件。先用getCookie得到浏览过商品的对象（点击后即浏览），判断此cookie和liu是否都存在，如果都存在遍历liu的每一项如果liu的一条数据中有一项的id和商品的id相同则不让此条cookie加到liu中，然后创建setCookie("liulian",liu),如果此cookie和liu不同时存在就setCookie("j"+obj.id,obj,10)。代码如下：
a.onclick=function(){
var o = getCookie("j"+obj.id);
if( o && liu){
var f = true;
$(liu).each(function(i,item){
if(item.id==o.id) f = false;
});
if ( f ){
if (liu.length >= 5) liu.splice(0,1);
liu.push(o);
}
setCookie("liulan",liu);
document.location.href = "show.html?id="+obj.id;
}else{
setCookie("j"+obj.id,obj,10);
document.location.href="show.html?id="+obj.id;
}
};
注：若代码有误欢迎大神多多指正。