最近在做一個購物車效果，為了實現商品的瀏覽記錄效果可是讓我百般周折，避免以後忘記特寫此隨筆與大家共享，希望博友們看後有所收獲。

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

}

};

註：若代碼有誤歡迎大神多多指正。

用JS中的cookie實現商品的瀏覽記錄