用JS中的cookie实现商品的浏览记录

Posted 2020-10-09 菜鸟乐谷

最近在做一个购物车效果，为了实现商品的浏览记录效果可是让我百般周折，避免以后忘记特写此随笔与大家共享，希望博友们看后有所收获。 

     第一步：在一个公用的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;

}

};

注：若代码有误欢迎大神多多指正。