Javascript操縱Cookie實現購物車程式

複製代碼 代碼如下:/*****************************************************************************************************
Name　　　　購物車
Version　　　　1.1
Author　　　　Vanni(凡林) url:www.27sea.com QQ:303590170
CreateDate　　2005-05-31
Description
　　此類是基於JavaScript和用戶端Cookie，請保證用戶端開啟Cookie
　　資料保持（預設24*30小時）可以通過 this.expire=? 小時來指定
　　類中兩內建的兩個對象 typeObj 和 proObj 均有兩個相同屬性名稱： name 和 value

類中資料存放區形式如下-----------------------------------
Array(
new typeObj('汽車',array(
　　　　new porObj('三菱',200),
　　　　new proObj('本田',500)
)
　　),
　　new typeObj('蛋',array(
　　　　new proObj('雞蛋',10),
　　　　new proObj('鴨蛋',20)
　　)
}

Cookie 存取形式為[使用escape()函數加密過]--------------
　　購物車名 = 汽車#三菱:200|本田:500,蛋#雞蛋:10|鴨蛋:20

注意：用戶端存Cookie時，不會出現問題。如果要迴圈儲存的話，可能會出現有些存入，而有些未存入
　　　解決方案：見下例(獲得URL裡的sales的數量，並存入Cookie)

檔案：/depot/compareproduct.php 中的JS程式碼片段
<script language="javascript">
var car=new Car('compare');
var typeName='list';
car.delType(typeName);　　　　//將先前對比的產品清除

//得到URL裡的參數，並分隔成數組
var url=location.href;
var start=url.lastIndexOf('?sales=');
var end=url.indexOf('&');
if(end==-1)end=url.length;
var urlparam=url.substring(url.lastIndexOf('?sales=')+7, end ).split(',');

function setPageVal(){
　　if(car.getPro(typeName).length==urlparam.length)return;　　　　//關鍵區段，如果數組長度不相等說明，有些Cookie沒有存入
　　else{
　　　　car.addType(typeName);　　　　　　　　　　　　//增一個類別
　　　　for(i=0;i<urlparam.length;i++){
　　　　　　car.addPro(typeName,urlparam[i],'');　　//增加對比產品，如果存在，返回假
　　　　}
　　　　setTimeout('setPageVal();',100);　　　　　　//再次調用自身，沒有用遞迴，是因為遞迴速度太快，仍會有存不進的問題
　　}
}

setPageVal();　　　　　　　　　　　　　　　　　　　　//初始化資料

function delItem(itemname){
　　car.delPro(typeName,itemname);
　　var carData=car.getPro(typeName);
　　var url='';
　　var carlen=carData.length;
　　if(carlen>1){
　　　　for(i=0;i<carData.length;i++){
　　　　　　if(i==0)　　url =carData[i].name;
　　　　　　else　　　　url+=','+carData[i].name;
　　　　}
　　　　document.write("waiting....");
　　　　location.href='../depot/compareproduct.php?sales='+url;
　　}else{
　　　　if(confirm('如果刪除它，那麼只剩一個對比項了，是否關閉此視窗？')){
　　　　　　car.delCar();
　　　　　　window.close();
　　　　}
　　}
}
</script>

*****************************************************************************************************/
/**
Cookie類
*/
function Cookie(){
　　/**
　　@desc 設定Cookie
　　@return void
　　*/
　　this.setCookie=function(name, value, hours){
　　　　var expire = "";
　　　　if(hours != null){
　　　　　　expire = new Date((new Date()).getTime() + hours * 3600000);
　　　　　　expire = "; expires=" + expire.toGMTString();
　　　　}
　　　　document.cookie = escape(name) + "=" + escape(value) + expire;
　　}
　　
　　/**
　　@desc 讀取Cookie
　　@return String
　　*/
　　this.getCookie=function(name){
　　　　var cookieValue = "";
　　　　var search = escape(name) + "=";
　　　　if(document.cookie.length > 0){
　　　　　　offset = document.cookie.indexOf(search);
　　　　　　if (offset != -1){
　　　　　　　　offset += search.length;
　　　　　　　　end = document.cookie.indexOf(";", offset);
　　　　　　　　if (end == -1) end = document.cookie.length;
　　　　　　　　cookieValue = unescape(document.cookie.substring(offset, end))
　　　　　　}
　　　　}
　　　　return cookieValue;　　　　
　　}　　
}

function Car(name){
　　
　　if( !window.clientInformation.cookieEnabled ) {
　　　　alert('你的瀏覽器不支援Cookie無法使用此 購物車 系統');
　　　　return false;
　　}
　　
　　//##內部變數#############################################################
　　
　　this.carName = name;
　　this.expire　　 = 24*30;　　　　//購物車的有效時間(30天)
　　this.carDatas = new Array();
　　this.cookie　　 = new Cookie();
　　
　　//##內部對象#############################################################
　　
　　this.typeObj=function(name,value){　　//內建的 類別 對象
　　　　this.name =name;
　　　　this.value="/value;
　　}
　　this.proObj=function(name,value){　　//內建的" 商品 對象
　　　　this.name =name;
　　　　this.value=value;
　　}
　　
　　//##私人方法列表##########################################################
　　//
　　//　　getTypePoint(typeName);　　　　　　　　//得到購物車裡類別數組裡的下標
　　//　　getProPoint(typeName,proName);　　　　//得到購物車裡類別下的產品下標
　　//　　saveCookie()　　　　　　　　　　　　//以特定的形式儲存此購物車的Cookie
　　//
　　//########################################################################
　　
　　/**
　　@desc 得到購物車裡類別數組裡的下標，找到的話返回下標，否則返回 -1
　　@return int
　　*/
　　this.getTypePoint=function(typeName){
　　　　var isok=false;
　　　　var i=0;
　　　　for(;i<this.carDatas.length;i++){
　　　　　　if(this.carDatas[i].name==typeName){
　　　　　　　　isok=true;　　　　　　//找到位置
　　　　　　　　break;
　　　　　　}
　　　　}
　　　　if(isok)　　return i;
　　　　else　　　　return -1;
　　}
　　
　　/**
　　@desc 得到購物車裡類別下的產品下標，找到返回下標，否則返回 -1
　　@return int
　　*/
　　this.getProPoint=function(typeId,proName){
　　　　var isok=false;
　　　　var j = 0;
　　　　var tempProObj=this.carDatas[typeId].value;
　　　　for(;j<tempProObj.length;j++){
　　　　　　if(tempProObj[j].name==proName){
　　　　　　　　isok=true;
　　　　　　　　break;　　
　　　　　　}
　　　　}
　　　　if(isok)　　return j;
　　　　else　　　　return -1;
　　}
　　
　　/**
　　@desc 儲存產生的Cookie字串
　　@return void
　　*/
　　this.saveCookie=function(){
　　　　var outStr='';
　　　　for( i=0; i<this.carDatas.length; i++ ){
　　　　　　var typeName =this.carDatas[i].name;
　　　　　　var typeValue=this.carDatas[i].value;
　　　　　　var proOutStr='';
　　　　　　for( j=0; j<typeValue.length; j++ ){
　　　　　　　　if ( j==0 )　　proOutStr = typeValue[j].name + ':' + typeValue[j].value;
　　　　　　　　else　　　　proOutStr += '|' + typeValue[j].name + ':' + typeValue[j].value;
　　　　　　}
　　　　　　if ( i==0 )　　outStr = typeName + '#' + proOutStr;
　　　　　　else　　　　outStr += ',' + typeName + '#' + proOutStr;
　　　　}
　　　　this.cookie.setCookie(this.carName,outStr,this.expire);　　//存入 Cookie　　
　　}
　　　　
　　//##構造語句############################################################
　　
　　if(this.cookie.getCookie(name)==''){
　　　　this.cookie.setCookie(name,'',this.expire);
　　}else{
　　　　var tempTypes=this.cookie.getCookie(name).split(',');
　　　　for(i=0;i<tempTypes.length;i++){
　　　　　　var tempTypeObj=tempTypes[i].split('#');
　　　　　　var type_pro=new Array();
　　　　　　if(tempTypeObj[1]){
　　　　　　　　var tempProObj=tempTypeObj[1].split('|');
　　　　　　　　for(j=0;j<tempProObj.length;j++){
　　　　　　　　　　var proDesc=tempProObj[j].split(':');
　　　　　　　　　　type_pro.push(new this.proObj(proDesc[0],proDesc[1]));
　　　　　　　　}
　　　　　　}
　　　　　　this.carDatas.push(new this.typeObj(tempTypeObj[0],type_pro));
　　　　}
　　}

　　//##公用方法列表#########################################################
　　//
　　//　　addType(typeName);　　　　　　　　　　//增加一個類別
　　//　　addPro(typeName,proName,value);　　　　//增加一個產品
　　//　　editPro(typeName,proName,value);　　//修改產品的值
　　//　　delPro(typeName,proName);　　　　　　//刪除購物車內的一個類別下的產品
　　//　　delType(typeName);　　　　　　　　　　//刪除購物車內的一個類別，包括類別下的產品
　　//　　delCar();　　　　　　　　　　　　　　//刪除購物車
　　//　　
　　//　　getCar();　　　　　　　　　　　　　　//得到整個購物車的資料
　　//　　getType();　　　　　　　　　　　　　　//得到購物車內的所有類別列表
　　//　　getPro(typeName);　　　　　　　　　　//得到購物車內指定類別下的產品列表
　　//　　getProVal(typeName,proName);　　　　//得到購物車內指定類別下的產品屬性
　　//
　　//########################################################################
　　
　　/**
　　@desc 在購物車裡增加一個類別，增加成功返回真，否則返回假
　　@return bool
　　*/
　　this.addType=function(typeName){
　　　　if(this.getTypePoint(typeName)!=-1)　　　　return false;　　　　　　　　//如果已經有此類別了，返回假
　　　　this.carDatas.push(new this.typeObj(typeName,new Array()));　　　　　　//push進 自身數組
　　　　this.saveCookie();　　//存入 Cookie
　　　　return true;
　　}
　　
　　/**
　　@desc 在購物車裡增加一個產品，增加成功返回真，否則返回假
　　@return bool
　　*/
　　this.addPro=function(typeName,proName,value){
　　　　var typePoint=this.getTypePoint(typeName);　　　　　　if ( typePoint ==-1 ) return false;　　　　//沒有此類別，無法增加，返回假
　　　　var proPoint =this.getProPoint(typePoint,proName);　　if ( proPoint != -1 ) return false;　　　　//有此產品了，無法增加重複，返回假
　　　　this.carDatas[typePoint].value.push(new this.proObj(proName,value));　　//push到自身數組
　　　　this.saveCookie();　　//存入 Cookie
　　　　return true;
　　}
　　
　　/**
　　@desc 修改購物車裡的產品屬性
　　@return bool
　　*/
　　this.editPro=function(typeName,proName,value){
　　　　var typePoint=this.getTypePoint(typeName);　　　　　　if ( typePoint == -1 ) return false;　　//沒有此類別，無法修改，返回假
　　　　var proPoint =this.getProPoint(typePoint,proName);　　if ( proPoint == -1 ) return false;　　//沒有此產品，無法修改，返回假
　　　　this.carDatas[typePoint].value[proPoint].value=value;　　　　　　　　　　　　　　//更新自身
　　　　this.saveCookie();　　//存入 Cookie
　　　　return true;
　　}
　　
　　/**
　　@desc 刪除一個產品
　　@return bool
　　*/
　　this.delPro=function(typeName,proName){
　　　　var typePoint=this.getTypePoint(typeName);　　　　　　if ( typePoint == -1 ) return false;　　//沒有此類別，無法刪除，返回假
　　　　var proPoint =this.getProPoint(typePoint,proName);　　if ( proPoint == -1 ) return false;　　//沒有此產品，無法刪除，返回假
　　　　var pros=this.carDatas[typePoint].value.length;
　　　　this.carDatas[typePoint].value[proPoint] = this.carDatas[typePoint].value[pros-1];　　//最後一個產品放置要刪除的產品上
　　　　this.carDatas[typePoint].value.pop();
　　　　this.saveCookie();　　//存入 Cookie
　　　　return true;
　　}
　　
　　/**
　　@desc 刪除一個類別
　　@return bool
　　*/
　　this.delType=function(typeName){
　　　　var typePoint=this.getTypePoint(typeName);　　if ( typePoint == -1 ) return false;　　//沒有此類別，無法刪除，返回假
　　　　var types=this.carDatas.length;
　　　　this.carDatas[typePoint] = this.carDatas[types-1];　　　　　　　　　　　　//刪除類別
　　　　this.carDatas.pop();
　　　　this.saveCookie();　　//存入 Cookie
　　　　return true;
　　}
　　
　　/**
　　@desc 刪除此購物車
　　@return void
　　*/
　　this.delCar=function(){
　　　　this.cookie.setCookie(this.carName,'',0);
　　　　this.carDatas=new Array();
　　　　this.saveCookie();　　//存入 Cookie
　　}
　　
　　/**
　　@desc 獲得購物車資料
　　@return Array
　　*/
　　this.getCar=function(){
　　　　return this.carDatas;
　　}
　　
　　/**
　　@desc 獲得類別列表
　　@return Array
　　*/
　　this.getType=function(){
　　　　var returnarr=new Array();
　　　　for ( i=0; i<this.carDatas.length; i++)　　　　returnarr.push(this.carDatas[i].name);
　　　　return returnarr;
　　}
　　
　　/**
　　@desc 獲得類別下的產品列表
　　@return Array
　　*/
　　this.getPro=function(typeName){
　　　　var typePoint=this.getTypePoint(typeName);　　if ( typePoint == -1 ) return false;　　//沒有此類別，返回假
　　　　return this.carDatas[typePoint].value;
　　}
　　
　　/**
　　@desc 獲得商品屬性
　　@return String
　　*/
　　this.getProVal=function(typeName,proName){
　　　　var typePoint=this.getTypePoint(typeName);　　　　　　if ( typePoint == -1 ) return false;　　//沒有此類別，返回假
　　　　var proPoint =this.getProPoint(typePoint,proName);　　if ( proPoint == -1 ) return false;　　//沒有此產品，返回假
　　　　return this.carDatas[typePoint].value[proPoint].value;
　　}
}