Window.localStorage购物车实现

背景:

       行业内企业应用,购物车不需要保存到服务器,关闭浏览器就清空购物车。

一、API:

子功能 js方法 参数及示例
单个商品加入购物车 myCart.addGood good:
{id:1, num:2, type: 1 }
商品批量加入购物车 myCart.addGoods goods:
[{"id":"1","num":1,"type":1},
{"id":"2","num":"2","type":1}]
删除单个商品 myCart.remove goodId:
1
批量删除商品 myCart.removeGoods goodIds:
[1,3,4]
清空购物车 myCart.removeAll
增减购物车某个商品的数量 myCart.addGoodNum  goodId=1, num=1或goodId=1, num=-2
修改购物车某个商品的数量 myCart.modifyGoodNum  goodId=1, num=8
查询购物车中某个商品的数量 myCart.getGoodNum goodId=1
查询购物车商品列表 myCart.getGoodList  
查询购物车商品ID列表 myCart.getGoodIdList  

二、上图:



然后上代码,打开页面可看到效果:

       注:1、由于使用了localStorage,需要有session.  所以必需把文件放到web容器后通过浏览器访问

              2、界面依赖JQuery.js

三、上代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
	<title>LocalStorage操作</title>
    <meta name="keywords" content="isoftstone zddaia employeeNo98974">
    <meta name="description" content="author daizhongde https://blog.csdn.net/jjk_02027">
    <meta name="description" content="author 戴忠戴  QQ 413881461">
    <meta name="content-type" content="text/html; charset=UTF-8">
    

    <script src="../js/jquery-2.2.4.min.js"></script>
<style type="text/css">

</style>
<script type="text/javascript">
var myCart = {};
var myStorage = localStorage;
/* id: good dh; num: good number;  type: selfuse, jtuse, person  */
var good = {id:1, num:2, type: 1 };
var goods = [];

/**
 * judge id whether exists in cartArray 
 * @param objArray
 * @param key  id's key  eg:id
 * @param value  id's value  eg:123
 * return true: cartArray contains id key, false: not contains id key
 */
function containsKeyInArray( objArray, idkey, idvalue ){
	console.log( "containsKeyInArray: "+JSON.stringify(objArray) )
	for(var i = 0; i < objArray.length; i++) {
// 		var tempObj = objArray[i];
		if( objArray[i][idkey] == idvalue)
			return true;
    }
	return false;
};

/**
 * plus cart's good number which exists in cart
 * @param objArray
 * @param good  id's key  eg:id
 * @param idkey  id's value  eg:123
 * @param numkey  id's value  eg:123
 */
function plusGoodNum2Array(objArray, good, idkey, numkey){
	//
	for(var i = 0; i < objArray.length; i++) {
// 		var tempObj = objArray[i];
		if( objArray[i][idkey] == good[idkey] )
			objArray[i][numkey] = Number(objArray[i][numkey]) + Number(good[numkey]);
    }
	return false;

};
/** 
 * add single good to cart
 * @param good good Object 
 */
myCart.addGood = function( good ){
	console.log( "myCart.addGood: "+JSON.stringify(good) );
	var cartArray = myStorage.cart?JSON.parse( myStorage.getItem("cart") ) : [];
// 	if( undefined == myStorage.cart || null == myStorage.cart );
// 	if( myStorage.cart ){//exist cart attribute , with cart item
	if( cartArray.length != 0 ){//exist cart attribute , with cart item
		if( !containsKeyInArray( cartArray, "id", good["id"] ) ){
			cartArray.push(good);
		}else{
			plusGoodNum2Array(cartArray, good,"id","num");
		}
		
	}else{//not exist cart attribute, no cart item
		cartArray.push(good);
	}
	myStorage.setItem("cart", JSON.stringify(cartArray) ); //convert cartArray to string storage in localStorage
};

/**
 * good's count plus some number, minus pass negative number<br>
 * js judge, when num =1, can't minus any more.<br>
 * use page: + - operate in cart page
 * @return good's new number
 */
myCart.addGoodNum = function(goodId, num){
	console.log( "myCart.addGoodNum: goodId="+goodId+",num="+num );
	var cartArray = myStorage.cart?JSON.parse( myStorage.getItem("cart") ) : [];
// 	if( undefined == myStorage.cart || null == myStorage.cart );
// 	if( myStorage.cart ){//exist cart attribute , with cart item
	if( cartArray.length != 0 ){//exist cart attribute , with cart item
		for(var i = 0; i < cartArray.length; i++) {
			if( cartArray[i]["id"] == goodId ){
				cartArray[i]["num"] = Number(cartArray[i]["num"]) + Number( num );
				break;
			}
	    }
	}
	myStorage.setItem("cart", JSON.stringify(cartArray) ); //convert cartArray to string storage in localStorage
	return cartArray[i]["num"];
};

/** 
 * add multiply good to cart
 * with problem , wait for solve ........
 * @param good goods Object Array
 */
myCart.addGoods = function( goods ){
	console.log("myCart.addGoods: "+ JSON.stringify(goods) );
	console.log("myCart.addGoods:  goods.length="+  goods.length );
	var cartArray = myStorage.cart?JSON.parse( myStorage.getItem("cart") ) : [];
	try {
		
		for(var i = 0; i < goods.length; i++) {
	// 		myCart.addGood( goods[i] );
			console.log("myCart.addGoods: i="+ i );
			if( cartArray.length != 0 ){//exist cart attribute , with cart item
				console.log("myCart.addGoods: i="+ i );
				if( !containsKeyInArray( cartArray, "id",  goods[i]["id"] ) ){
					cartArray.push( goods[i]);
				}else{
					console.log("myCart.addGoods: i="+ i );
					plusGoodNum2Array(cartArray,  goods[i],"id","num");
					console.log("myCart.addGoods: i="+ i );
				}
			}else{//not exist cart attribute, no cart item
				cartArray.push( goods[i]);
			}
			console.log("myCart.addGoods: cartArray="+ JSON.stringify(cartArray) );
			console.log("myCart.addGoods: goods="+ JSON.stringify(goods)+",goods.length:"+goods.length+",i:"+i );
	    }
	
	}
	catch(err) {
	    document.getElementById("error").innerHTML = err.message;
	}
	
	myStorage.setItem("cart", JSON.stringify(cartArray) ); //convert cartArray to string storage in localStorage
};
/**
 * remove a good from cart
 */
myCart.remove = function(goodId){
	console.log("myCart.remove: "+ goodId);
	var cartArray = myStorage.cart ? JSON.parse( myStorage.getItem("cart") ) : [];
	if( cartArray.length != 0  ){//exist cart attribute , with cart item.  && containsKeyInArray( cartArray, "id", goodId )
		console.log("myCart.remove: cartArray.length != 0 && containsKeyInArray( cart, \"id\", goodId ) is true");
		console.log("myCart.remove: cartArray.length:"+cartArray.length);
		for(var i = 0; i < cartArray.length; i++) {
			if( cartArray[i]["id"] == goodId ){
				cartArray.splice(i, 1);
				myStorage.setItem("cart", JSON.stringify(cartArray) ); //convert cartArray to string storage in localStorage
				break;
			}
	    }
	}
	console.log("myCart.remove: cartArray.length != 0 && containsKeyInArray( cart, \"id\", goodId ) is false. like " +(cartArray.length != 0) + "&&"+ (containsKeyInArray( cart, "id", goodId )));
};
/**
 * remove multiply goods from cart
 */
myCart.removeGoods = function(goodIds){
	console.log("myCart.removeGoods: "+ JSON.stringify(goodIds) );
	var cartArray = myStorage.cart ? JSON.parse( myStorage.getItem("cart") ) : [];
	var removeflag = 0;
	if( cartArray.length != 0 ){//exist cart attribute , with cart item
		for(var i = 0; i < goodIds.length; i++) {
			console.log("myCart.removeGoods: "+ i);
// 			myCart.remove( goodIds[i] );
			for(var j = 0; j < cartArray.length; j++) {
				if( cartArray[j]["id"] == goodIds[i] ){
					cartArray.splice(j, 1);
					removeflag ++;
					break;
				}
		    }
	    }
		myStorage.setItem("cart", JSON.stringify(cartArray) ); //convert cartArray to string storage in localStorage
	}
};
/**
 * clear cart
 */
myCart.removeAll = function(){
	myStorage.removeItem("cart");
};

/* set good's num */
myCart.modifyGoodNum = function(goodId, num )
{
   	var cartArray = myStorage.cart ? JSON.parse( myStorage.getItem("cart") ) : [];
   	for(var i = 0; i < cartArray.length; i++) {
   		if( cartArray[i]["id"] == goodId )
   			cartArray[i]["num"]= Number(num);
       }
   	myStorage.setItem("cart", JSON.stringify(cartArray) );
   	
};
/* get good's num */
myCart.getGoodNum = function( goodId )
{
   	var cartArray = myStorage.cart ? JSON.parse( myStorage.getItem("cart") ) : [];
   	for(var i = 0; i < cartArray.length; i++) {
   		if( cartArray[i]["id"] == goodId )
   			return cartArray[i]["num"];
    }
   	return 0;
};
/* get good list  */
myCart.getGoodList = function( )
{
   	return myStorage.cart ? myStorage.getItem("cart") : "";
};
/* get good id list  */
myCart.getGoodIdList = function( )
{
	var cartArray = myStorage.cart ? JSON.parse( myStorage.getItem("cart") ) : [];
	var goodIdList = cartArray.map(function(v){return v.id;});
	return goodIdList;
};
/**
 * find other attribute's value by primary key id
 * @param objArray
 * @param key  id's key  eg:id
 * @param numKey  target value's key  eg:8
 * return target value
 */
function getAttrValueByKey( objArray, idkey,idvalue, attrName ){
	console.log( "getAttrValueByKey: "+JSON.stringify(objArray) )
	for(var i = 0; i < objArray.length; i++) {
// 		var tempObj = objArray[i];
		if( objArray[i][idkey] == idvalue)
			return objArray[i][attrName];
    }
	return "";
};


function refreshTextarea(){
	//refresh cart data
	$('#cart').val(myStorage.cart ? myStorage.getItem("cart").replace(/\}\,\{/g, decodeURI("},\n{")) : "");
	
	var goodIdList = myCart.getGoodIdList();
	//refresh goodIdList data
	$('#goodIdList').val( goodIdList );
};


function add2Storage(){
	myCart.addGood({'id':$('#addspid').val(), 'num': Number($('#spnum').val()),'type':1 } );  
	refreshTextarea();
};
function batchAdd2Cart(){
	console.log("batchAdd2Cart: "+ JSON.stringify( JSON.parse($('#goods').val()) ) );
	myCart.addGoods( JSON.parse($('#goods').val()) ); 
	refreshTextarea();
};

function batchRemoveCart(){
	console.log("batchRemoveCart: "+ JSON.stringify($('#removespidlist').val().split(',')) );
	myCart.removeGoods( $('#removespidlist').val().split(',') ); 
	refreshTextarea();
};
/* good id key enter event */
function enterKeyDown(event)
{
    if(event.keyCode==13)
    {
//     	var cartArray = myStorage.cart ? JSON.parse( myStorage.getItem("cart") ) : [];
//     	var num = getAttrValueByKey( cartArray, "id", $('#plusGoodId').val(), "num" );
    	var num = myCart.getGoodNum($('#plusGoodId').val());
    	console.log("num:"+num);
    	$('#goodNum').val( num );
	}
};
/* good number key enter event */
function enterKeyDown2(event, obj )
{
    if(event.keyCode==13)
    {
    	myCart.modifyGoodNum($('#plusGoodId').val(), Number(obj.value) );
    	refreshTextarea();
	}
};
/* good number input change event */
function goodNumChange( obj )
{
   	myCart.modifyGoodNum($('#plusGoodId').val(), Number(obj.value) );
   	refreshTextarea();
};
</script>
</head>
<body onload="refreshTextarea()">
<fieldset title="加入购物车"><legend>加入购物车</legend>
请输入商品ID:<input type="text" id="addspid" name="spid" value="1"/>
请输入购买数量:<input type="text" id="spnum" name="spnum" value="1" style="width:30px"/>
<input type="button" name="add" value="加入购物车" onclick="add2Storage()"/>

<br/><br/>
<textarea id="goods" rows="3" cols="40">
[{"id":"1","num":1,"type":1},
{"id":"2","num":"2","type":1}]
</textarea>
<input type="button" name="add" value="批量加入购物车" onclick="batchAdd2Cart()"/>
</fieldset>

<fieldset title="删除商品"><legend>删除商品</legend>
请输入商品ID:<input type="text" id="removespid" name="removespid" value="1"/>
<input type="button" name="remove" value="从购物车移除" onclick="myCart.remove( $('#removespid').val() );  refreshTextarea();"/>

<br/><br/>
请输入商品ID列表:<input type="text" id="removespidlist" name="removespidlist" value="1,2"/>*逗号分隔
<input type="button" name="remove" value="(批量)移除" onclick="batchRemoveCart()"/>

<br/><br/>
<input type="button" name="remove" value="清空购物车" onclick="myCart.removeAll();  refreshTextarea();"/>
</fieldset>


<fieldset title="修改数量"><legend>修改数量</legend>
购物车操作:请输入商品ID
<input type="text" id="plusGoodId" name="plusGoodId" value="1"  onkeydown="enterKeyDown(event)"/>
<input type="button" name="minus" value="-" onclick="myCart.addGoodNum( $('#plusGoodId').val(), -1 ); $('#goodNum').val( Number($('#goodNum').val())-1 ); refreshTextarea();" />
<input type="text" id="goodNum" name="goodNum" value="1" style="width:30px"  onchange="goodNumChange(this)" />
<!-- onkeydown="enterKeyDown2(event,this)" -->
<input type="button" name="plus" value="+" onclick="myCart.addGoodNum( $('#plusGoodId').val(), 1 );  $('#goodNum').val( Number($('#goodNum').val()) +1 ); refreshTextarea();"/>
*输入商品ID或数量后请按回车
</fieldset>

<fieldset title="查看购物车"><legend>查看购物车</legend>
	<table  border="1">
		<thead>
			<tr>
				<th>localStroage 的Cart 数据</th>
				<th>商品ID列表</th>
				<th>error</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td><textarea id="cart" rows="8" cols="30"></textarea></td>
				<td><textarea id="goodIdList" rows="8" cols="30"></textarea></td>
				<td><textarea id="error" rows="8" cols="30"></textarea></td>
			</tr>
		</tbody>
	</table>
</fieldset>
</body>
</html>


四、参考文档

Window.localStorage技术参考文档:

https://developer.mozilla.org/zh-CN/docs/Web/API/Window/localStorage

阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页