Javascript操縱Cookie實(shí)現(xiàn)購(gòu)物車程序
更新時(shí)間：2006年11月23日 00:00:00 作者：
復(fù)制代碼 代碼如下:
/*****************************************************************************************************
Name 購(gòu)物車
Version 1.1
Author Vanni(凡林) url:www.27sea.com QQ:303590170
CreateDate 2005-05-31
Description
此類是基于JavaScript和客戶端Cookie，請(qǐng)保證客戶端開(kāi)啟Cookie
數(shù)據(jù)保持（默認(rèn)24*30小時(shí)）可以通過(guò) this.expire=? 小時(shí)來(lái)指定
類中兩自帶的兩個(gè)對(duì)象 typeObj 和 proObj 均有兩個(gè)相同屬性名： name 和 value
類中數(shù)據(jù)存儲(chǔ)形式如下-----------------------------------
Array(
new typeObj('汽車',array(
new porObj('三菱',200),
new proObj('本田',500)
)
),
new typeObj('蛋',array(
new proObj('雞蛋',10),
new proObj('鴨蛋',20)
)
}
Cookie 存取形式為[使用escape()函數(shù)加密過(guò)]--------------
購(gòu)物車名 = 汽車#三菱:200|本田:500,蛋#雞蛋:10|鴨蛋:20
注意：客戶端存Cookie時(shí)，不會(huì)出現(xiàn)問(wèn)題。如果要循環(huán)存儲(chǔ)的話，可能會(huì)出現(xiàn)有些存入，而有些未存入
解決方法：見(jiàn)下例(獲得URL里的sales的數(shù)量，并存入Cookie)
文件：/depot/compareproduct.php 中的JS代碼片段
<script language="javascript">
var car=new Car('compare');
var typeName='list';
car.delType(typeName); //將先前對(duì)比的產(chǎn)品清除
//得到URL里的參數(shù)，并分隔成數(shù)組
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; //關(guān)鍵部分，如果數(shù)組長(zhǎng)度不相等說(shuō)明，有些Cookie沒(méi)有存入
else{
car.addType(typeName); //增一個(gè)類別
for(i=0;i<urlparam.length;i++){
car.addPro(typeName,urlparam[i],''); //增加對(duì)比產(chǎn)品，如果存在，返回假
}
setTimeout('setPageVal();',100); //再次調(diào)用自身，沒(méi)有用遞歸，是因?yàn)檫f歸速度太快，仍會(huì)有存不進(jìn)的問(wèn)題
}
}
setPageVal(); //初始化數(shù)據(jù)
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('如果刪除它，那么只剩一個(gè)對(duì)比項(xiàng)了，是否關(guān)閉此窗口？')){
car.delCar();
window.close();
}
}
}
</script>
*****************************************************************************************************/
/**
Cookie類
*/
function Cookie(){
/**
@desc 設(shè)置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無(wú)法使用此 購(gòu)物車 系統(tǒng)');
return false;
}
//##內(nèi)部變量#############################################################
this.carName = name;
this.expire = 24*30; //購(gòu)物車的有效時(shí)間(30天)
this.carDatas = new Array();
this.cookie = new Cookie();
//##內(nèi)部對(duì)象#############################################################
this.typeObj=function(name,value){ //自帶的 類別 對(duì)象
this.name =name;
this.value="/value;
}
this.proObj=function(name,value){ //自帶的" 商品 對(duì)象
this.name =name;
this.value=value;
}
//##私有方法列表##########################################################
//
// getTypePoint(typeName); //得到購(gòu)物車?yán)镱悇e數(shù)組里的下標(biāo)
// getProPoint(typeName,proName); //得到購(gòu)物車?yán)镱悇e下的產(chǎn)品下標(biāo)
// saveCookie() //以特定的形式存儲(chǔ)此購(gòu)物車的Cookie
//
//########################################################################
/**
@desc 得到購(gòu)物車?yán)镱悇e數(shù)組里的下標(biāo)，找到的話返回下標(biāo)，否則返回 -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 得到購(gòu)物車?yán)镱悇e下的產(chǎn)品下標(biāo)，找到返回下標(biāo)，否則返回 -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 存儲(chǔ)生成的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
}
//##構(gòu)造語(yǔ)句############################################################
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); //增加一個(gè)類別
// addPro(typeName,proName,value); //增加一個(gè)產(chǎn)品
// editPro(typeName,proName,value); //修改產(chǎn)品的值
// delPro(typeName,proName); //刪除購(gòu)物車內(nèi)的一個(gè)類別下的產(chǎn)品
// delType(typeName); //刪除購(gòu)物車內(nèi)的一個(gè)類別，包括類別下的產(chǎn)品
// delCar(); //刪除購(gòu)物車
//
// getCar(); //得到整個(gè)購(gòu)物車的數(shù)據(jù)
// getType(); //得到購(gòu)物車內(nèi)的所有類別列表
// getPro(typeName); //得到購(gòu)物車內(nèi)指定類別下的產(chǎn)品列表
// getProVal(typeName,proName); //得到購(gòu)物車內(nèi)指定類別下的產(chǎn)品屬性
//
//########################################################################
/**
@desc 在購(gòu)物車?yán)镌黾右粋€(gè)類別，增加成功返回真，否則返回假
@return bool
*/
this.addType=function(typeName){
if(this.getTypePoint(typeName)!=-1) return false; //如果已經(jīng)有此類別了，返回假
this.carDatas.push(new this.typeObj(typeName,new Array())); //push進(jìn) 自身數(shù)組
this.saveCookie(); //存入 Cookie
return true;
}
/**
@desc 在購(gòu)物車?yán)镌黾右粋€(gè)產(chǎn)品，增加成功返回真，否則返回假
@return bool
*/
this.addPro=function(typeName,proName,value){
var typePoint=this.getTypePoint(typeName); if ( typePoint ==-1 ) return false; //沒(méi)有此類別，無(wú)法增加，返回假
var proPoint =this.getProPoint(typePoint,proName); if ( proPoint != -1 ) return false; //有此產(chǎn)品了，無(wú)法增加重復(fù)，返回假
this.carDatas[typePoint].value.push(new this.proObj(proName,value)); //push到自身數(shù)組
this.saveCookie(); //存入 Cookie
return true;
}
/**
@desc 修改購(gòu)物車?yán)锏漠a(chǎn)品屬性
@return bool
*/
this.editPro=function(typeName,proName,value){
var typePoint=this.getTypePoint(typeName); if ( typePoint == -1 ) return false; //沒(méi)有此類別，無(wú)法修改，返回假
var proPoint =this.getProPoint(typePoint,proName); if ( proPoint == -1 ) return false; //沒(méi)有此產(chǎn)品，無(wú)法修改，返回假
this.carDatas[typePoint].value[proPoint].value=value; //更新自身
this.saveCookie(); //存入 Cookie
return true;
}
/**
@desc 刪除一個(gè)產(chǎn)品
@return bool
*/
this.delPro=function(typeName,proName){
var typePoint=this.getTypePoint(typeName); if ( typePoint == -1 ) return false; //沒(méi)有此類別，無(wú)法刪除，返回假
var proPoint =this.getProPoint(typePoint,proName); if ( proPoint == -1 ) return false; //沒(méi)有此產(chǎn)品，無(wú)法刪除，返回假
var pros=this.carDatas[typePoint].value.length;
this.carDatas[typePoint].value[proPoint] = this.carDatas[typePoint].value[pros-1]; //最后一個(gè)產(chǎn)品放置要?jiǎng)h除的產(chǎn)品上
this.carDatas[typePoint].value.pop();
this.saveCookie(); //存入 Cookie
return true;
}
/**
@desc 刪除一個(gè)類別
@return bool
*/
this.delType=function(typeName){
var typePoint=this.getTypePoint(typeName); if ( typePoint == -1 ) return false; //沒(méi)有此類別，無(wú)法刪除，返回假
var types=this.carDatas.length;
this.carDatas[typePoint] = this.carDatas[types-1]; //刪除類別
this.carDatas.pop();
this.saveCookie(); //存入 Cookie
return true;
}
/**
@desc 刪除此購(gòu)物車
@return void
*/
this.delCar=function(){
this.cookie.setCookie(this.carName,'',0);
this.carDatas=new Array();
this.saveCookie(); //存入 Cookie
}
/**
@desc 獲得購(gòu)物車數(shù)據(jù)
@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 獲得類別下的產(chǎn)品列表
@return Array
*/
this.getPro=function(typeName){
var typePoint=this.getTypePoint(typeName); if ( typePoint == -1 ) return false; //沒(méi)有此類別，返回假
return this.carDatas[typePoint].value;
}
/**
@desc 獲得商品屬性
@return String
*/
this.getProVal=function(typeName,proName){
var typePoint=this.getTypePoint(typeName); if ( typePoint == -1 ) return false; //沒(méi)有此類別，返回假
var proPoint =this.getProPoint(typePoint,proName); if ( proPoint == -1 ) return false; //沒(méi)有此產(chǎn)品，返回假
return this.carDatas[typePoint].value[proPoint].value;
}
}
您可能感興趣的文章:
- Javascript操縱Cookie實(shí)現(xiàn)購(gòu)物車程序
- js+cookies實(shí)現(xiàn)懸浮購(gòu)物車的方法
- jQuery基于json與cookie實(shí)現(xiàn)購(gòu)物車的方法
- jQuery使用cookie與json簡(jiǎn)單實(shí)現(xiàn)購(gòu)物車功能
- 原生JS 購(gòu)物車及購(gòu)物頁(yè)面的cookie使用方法
- 簡(jiǎn)單的前端js+ajax 購(gòu)物車框架(入門篇)
- JavaScript編寫一個(gè)簡(jiǎn)易購(gòu)物車功能
- 利用Angularjs和bootstrap實(shí)現(xiàn)購(gòu)物車功能
- js實(shí)現(xiàn)商品拋物線加入購(gòu)物車特效
- 原生js實(shí)現(xiàn)淘寶購(gòu)物車功能
- 原生js+cookie實(shí)現(xiàn)購(gòu)物車功能的方法分析
相關(guān)文章
這篇文章主要介紹了微信小程序中post方法與get方法的封裝的相關(guān)資料,希望通過(guò)本文能幫助到大家，讓大家掌握如何封裝，需要的朋友可以參考下2017-09-09
javascript 通過(guò)鍵名獲取鍵盤的keyCode方法
下面小編就為大家分享一篇javascript 通過(guò)鍵名獲取鍵盤的keyCode方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2017-12-12
JavaScript添加隨滾動(dòng)條滾動(dòng)窗體的方法
這篇文章主要介紹了JavaScript添加隨滾動(dòng)條滾動(dòng)窗體的方法,涉及JavaScript事件響應(yīng)及頁(yè)面元素動(dòng)態(tài)操作相關(guān)技巧,需要的朋友可以參考下2016-02-02
返回頂部按鈕響應(yīng)滾動(dòng)且動(dòng)態(tài)顯示與隱藏
返回頂部功能在很多的網(wǎng)站上都有，判斷滾動(dòng)參數(shù)動(dòng)態(tài)顯示與隱藏，下面的示例很實(shí)用，喜歡的朋友可以收藏下2014-10-10
這篇文章主要介紹了深入理解es6塊級(jí)作用域的使用，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
JavaScript深拷貝的幾種實(shí)現(xiàn)方法實(shí)例
javascript深拷貝是初學(xué)者甚至有經(jīng)驗(yàn)的開(kāi)發(fā)著,都會(huì)經(jīng)常遇到問(wèn)題,下面這篇文章主要給大家介紹了關(guān)于JavaScript深拷貝的幾種實(shí)現(xiàn)方法,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-05-05
這篇文章主要介紹了js如何打印object對(duì)象，需要的朋友可以參考下2015-10-10
微信小程序使用wx.request請(qǐng)求服務(wù)器json數(shù)據(jù)并渲染到頁(yè)面操作示例
這篇文章主要介紹了微信小程序使用wx.request請(qǐng)求服務(wù)器json數(shù)據(jù)并渲染到頁(yè)面操作,結(jié)合實(shí)例形式分析了微信小程序使用wx.request發(fā)送網(wǎng)絡(luò)請(qǐng)求及返回結(jié)果渲染到wxml界面相關(guān)操作技巧,需要的朋友可以參考下2019-03-03
js檢查頁(yè)面上有無(wú)重復(fù)id的實(shí)現(xiàn)代碼
有時(shí)候我們需要檢查一個(gè)頁(yè)面上是否用重復(fù)的id，一般id都是唯一的，也方便控制，那么就可以參考下面的代碼2013-07-07
BootStrap響應(yīng)式導(dǎo)航條實(shí)例介紹
響應(yīng)式導(dǎo)航條就是可以在不同的設(shè)備下查看不同的效果。這篇文章主要介紹了BootStrap響應(yīng)式導(dǎo)航條實(shí)例介紹的相關(guān)資料，小編認(rèn)為本文介紹的非常的不錯(cuò)，特此分享給大家，供大家參考2016-05-05