本文共 9906 字，大约阅读时间需要 33 分钟。

CSS、JavaScript；本地存储（localstorage）实现简单购物车添加、删除、计算、本地存储等。文章最下方见效果图。

        	    		
       		    		
       		    	    	    		
       			
    
    				
     
    					
      
    						    						
Huawei/华为P20 Pro
    						
￥4000.00
    					
    					
      
    						    						
SMARTISAN/锤子 坚果手机
    						
￥2880.00
    					
    					
      
    						    						
Lenovo/联想 拯救者 Y7000 14.0
    						
￥5200.00
    					
    					
      
    						    						
Apple/苹果 IPad 2018款
    						
￥2200.00
    					
    					
      
    						    						
Xiaomi/小米8 透明探索版
    						
￥3988.00
    					
    				
     
    			
    
    			
    
     
    
    			
    
    				
     
    					      
       
        
 全选
    					        
图片
    					        
名称
    					        
单价
    					        
数量
    					        
操作
       
    					    					       
    						        
    						        
合计：￥0  
    					       
    				      
     
    			
    
    		
       	    

css代码：

* {
        	margin: 0;    	padding: 0;    	list-style: none;    }        .good-list {
        	width: 700px;    	height: 220px;    }        .good-list li {
        	float: left;    	width: 140px;    	height: 160px;    }        .good-list li:hover {
        	cursor: pointer;    }    .good-list img {
        	height: 140px;    	width: 140px;    }        .good-list p {
        	text-align: center;    }        .good-name {
        	font-size: 14px;    }        .good-pice {
        	font-size: 12px;    	color: red;    }    .shopping{
        	width: 700px;    }    .shopping table{
        	width: 100%;    }    /*.shopping input[type="checkbox"]{display: inline-block;}*/    .number{
        	display: inline-block;    	font-size: 14px;    	width: 35px;    	line-height: 120%;    	border-left:1px solid #ddccdd;    	border-right:1px solid #ddccdd;    }    .number-bt{
        	display: inline-block;    	font-size: 18px;    	border: 0;    	width: 20px;    	background: none;    }    .goodNumber{
        	height: 30px;    	border-radius: 4px;    	border: 1px solid #ddccdd;    }    #pay{
        	width: 60px;    	height: 30px;    	border: none;    	background-color: #FF3333;    	border-radius: 20px;    	margin: 5px 0 5px 0;    }    #deleteAll{
        	width: 60px;    	height: 30px;    	font-size: 12px;    	font-family: "blackadder itc";    	background:none;    	border: 1px solid #FF3300;    	border-radius: 20px;    	margin-left:5px ;    }    #tb{
        	border-radius:3px ;    	background-size: 100%;    	background-image: url(img/bgi.jpg);    	background-position-y: -70px;    }    #tb img{
        	margin-top: 5px;    }    #tb input[type="checkbox"]{
        	display: inline-block;    	background-color: #FF33000;    	border-radius: 100px;    	}    button{
        	background: none;    	border: none;    }

JS代码：

window.onload = function() {
        	var tB = document.getElementById("tb");    	//从localstroage中取出保存的购物车信息    	if(window.localStorage) {
        		var shoppingInfoText = localStorage.getItem("shoppingInfo");    		if(shoppingInfoText != null) {
        			//将本地存储加入购物车列表。    			var shoppingInfoObject = JSON.parse(shoppingInfoText);    			for(var i = 0; i < shoppingInfoObject.length; i++) {
        				var tr = tB.insertRow(1); //向表格添加一行，位置在第一行    				tr.align = "center";    				var td1 = tr.insertCell(tr.cells.length);    				td1.innerHTML = "";    				var td2 = tr.insertCell(tr.cells.length);    				td2.innerHTML = "";    				var td3 = tr.insertCell(tr.cells.length);    				td3.innerHTML = shoppingInfoObject[i].goodName;    				var td4 = tr.insertCell(tr.cells.length);    				td4.innerHTML = shoppingInfoObject[i].goodPrice;    				var td5 = tr.insertCell(tr.cells.length);    				var td5HTML = "";    				td5HTML += "" + shoppingInfoObject[i].num + "";    				td5HTML += "";    				td5.innerHTML = "" + td5HTML + "";    				var td6 = tr.insertCell(tr.cells.length);    				td6.innerHTML = "删除"    				tb.rows[0].cells[0].children[0].checked = false; //新增后‘全选’为false    			}    			total();    		}    	}    	tb.rows[0].cells[0].children[0].checked = false; //‘全选’默认为false    	//加载事件中获取列表的所有li标签    	var getLi = document.querySelectorAll("#ul li");    	for(var i = 0; i < getLi.length; i++) {
        		getLi[i].onclick = function() {
        			var imgPath = this.children[0].getAttribute("src");    			var goodName = this.children[1].innerHTML;    			var goodPrice = this.children[2].innerHTML;    			var isExist = false;    			for(var i = 1; i < tb.rows.length - 1; i++) {
        				if(tb.rows[i].cells[2].innerHTML == goodName) {
        					//检查商品是否已在购物车，存在则叠加    					var carExistNum = parseInt(tb.rows[i].cells[4].children[0].children[1].innerHTML);    					tb.rows[i].cells[4].children[0].children[1].innerHTML = carExistNum + 1;    					isExist = true;    					if(window.localStorage) {
        						var shoppingInfoText = localStorage.getItem("shoppingInfo");    						var shoppingInfoObject = JSON.parse(shoppingInfoText);    						shoppingInfoObject[tb.rows.length - i - 2].num++;    						localStorage.setItem("shoppingInfo", JSON.stringify(shoppingInfoObject));    					}    					break;    				}    				//				//自定选择，当全部选取    				//				var isSelect1 = tb.rows[i].cells[0].children[0];    				//					console.log(isSelect1[i]);    				//				if(isSelect1.checked){
        				//					tb.rows[0].cells[0].children[0].checked = true;//全部‘全选’为true    				//				}    			}    			if(isExist == false) {
        				var tr = tB.insertRow(1); //向表格添加一行，位置在第一行    				tr.align = "center";    				var td1 = tr.insertCell(tr.cells.length);    				td1.innerHTML = "";    				var td2 = tr.insertCell(tr.cells.length);    				td2.innerHTML = "";    				var td3 = tr.insertCell(tr.cells.length);    				td3.innerHTML = goodName;    				var td4 = tr.insertCell(tr.cells.length);    				td4.innerHTML = goodPrice;    				var td5 = tr.insertCell(tr.cells.length);    				var td5HTML = "";    				td5HTML += "1";    				td5HTML += "";    				td5.innerHTML = "" + td5HTML + "";    				var td6 = tr.insertCell(tr.cells.length);    				td6.innerHTML = "删除"    				tb.rows[0].cells[0].children[0].checked = false; //新增后‘全选’为false        				if(window.localStorage) {
        					var shoppingInfoText = localStorage.getItem("shoppingInfo");    					var shoppingInfoObject = null;    					if(shoppingInfoText == null) {
        						shoppingInfoObject = [];    					} else {
        						shoppingInfoObject = JSON.parse(shoppingInfoText); //转数组    					}    					var goods = new Object();    					goods.imgPath = imgPath;    					goods.goodName = goodName;    					goods.goodPrice = goodPrice;    					goods.num = 1;    					shoppingInfoObject.push(goods);    					localStorage.setItem("shoppingInfo", JSON.stringify(shoppingInfoObject));    				}    			}    			total(); //总计    		}    	}    }    //计算合计函数    function total() {
        	var totalMoney = 0;    	var totalNum = 0;    	for(var i = 1; i < tb.rows.length - 1; i++) {
        		var box = tb.rows[i].cells[0].children[0];    		if(box.checked) {
        			//获取出单价 转为浮点型    			var price = parseFloat(tb.rows[i].cells[3].innerHTML.substring(1, ));    			var num = parseFloat(tb.rows[i].cells[4].children[0].children[1].innerHTML);    			totalMoney += price * num;    			totalNum += num;    		}    	}    	document.getElementById("pay").value = "结算(" + totalNum + ")";    	document.getElementById("totalSpan").innerHTML = totalMoney;    }    //全选功能函数    function allSelect(isSelect) {
        	for(var i = 1; i < tb.rows.length - 1; i++) {
        		if(isSelect) {
        			tb.rows[i].cells[0].children[0].checked = true;    		} else {
        			tb.rows[i].cells[0].children[0].checked = false;    		}    	}    }    //删除全选功能函数    function deletAllSelect() {
        	var boxes = document.getElementsByName("isCheckbox");    	for(i = 0; i < boxes.length; i++) {
        		if(boxes[i].checked) {
        			tr = boxes[i].parentNode.parentNode;    			tr.parentNode.removeChild(tr);    			if(window.localStorage) {
        				var shoppingInfoText = localStorage.getItem("shoppingInfo");    				var shoppingInfoObject = JSON.parse(shoppingInfoText);    				shoppingInfoObject.splice(i - 1, 1);    				//删除完存储    				localStorage.setItem("shoppingInfo", JSON.stringify(shoppingInfoObject));    			}    			i--;    		}    	}    	document.getElementById("pay").value = "结算(0)";    	document.getElementById("totalSpan").innerHTML = 0;    	tb.rows[0].cells[0].children[0].checked = false;    }    //删除一个功能函数    function deleteAShop(isShop) {
        	var indexTr = isShop.rowIndex;    	isShop.parentNode.removeChild(isShop);    	if(window.localStorage) {
        		var shoppingInfoText = localStorage.getItem("shoppingInfo");    		var shoppingInfoObject = JSON.parse(shoppingInfoText);    		shoppingInfoObject.splice(tb.rows.length - indexTr-1, 1);    		localStorage.setItem("shoppingInfo", JSON.stringify(shoppingInfoObject));    	}    	total();    }    //加一操作    function addA(a) {
        	var num = parseInt(a.children[1].innerHTML);    	a.children[1].innerHTML = num + 1;    	var index = a.parentNode.parentNode.rowIndex;    		if(window.localStorage) {
        			var shoppingInfoText = localStorage.getItem("shoppingInfo");    			var shoppingInfoObject = JSON.parse(shoppingInfoText);    			shoppingInfoObject[tb.rows.length - index - 2].num++;    			localStorage.setItem("shoppingInfo", JSON.stringify(shoppingInfoObject));    		}    }    //减一操作    function subtractA(a) {
        	var num = parseInt(a.children[1].innerHTML);    	if(num > 1) {
        		a.children[1].innerHTML = num - 1;    		var index = a.parentNode.parentNode.rowIndex;    		if(window.localStorage) {
        			var shoppingInfoText = localStorage.getItem("shoppingInfo");    			var shoppingInfoObject = JSON.parse(shoppingInfoText);    			shoppingInfoObject[tb.rows.length - index - 2].num--;    			localStorage.setItem("shoppingInfo", JSON.stringify(shoppingInfoObject));    		}    	}    }

效果图：