localstorage实现购物车案例_localstorage购物车-CSDN博客

本文链接：https://blog.csdn.net/weixin_45757442/article/details/103255551

localstorage实现购物车案例

localstorage

localstorage

		//本地存储  永久存储  存 值为字符串     取 值为字符串
		//localStorage
		//增删改查
		
		//增
		//localStorage.setItem("username","admin");
		//改
		//localStorage.setItem("username","admin111");  //同名会覆盖
		//查
		//let val = localStorage.getItem("username");
		//删
		//localStorage.removeItem("username");

localStorage存取功能的基本实现

			let obj = {name:"john"};
			let obj = localStorage.setItem("username","admin");
			//将json格式的对象转换成json格式的字符串
			let str = JSON.stringify(obj);
			//将json格式的字符串存入localstorage中
			localStorage.setItem("obj",str);
			//将localStorage中的数据提取出来（字符串格式）
			let str1 = localStorage.getItem("obj");
			//将json格式的字符串转换成json对象
			let obj1 = JSON.parse(str1);

商品页面实现

至此localstorage的增删改查已经实现，下面实现基本商品列表页

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
 <style>
     input{
         border: 2px firebrick solid;
         color: #ffffff;
         width: 250px;
         height: 30px;
         text-align: center;
         line-height: 30px;
     }
     li{
         width: 250px;
         height: 300px;
         border: solid 1px #cecece;
        list-style: none;
		margin: 0 10px;
     }
     ul{
         display: block;
         display: flex;
		 /* justify-content: space-between; */
     }
     img{
         width: 250px;
     }
     p{
         display: flex;
        justify-content: space-between;
     }
 </style>
<body>
	<h4>
		<a href="gouwuc.html">购物车
		<span class="shuliang">0</span>
		</a>
	</h4>
    <ul class="ul">
        <!-- <li>
            <img src="./img/yifu1.jpg">
            <p>
                <span>冬季衣服1</span>
                <span>价格：<span style="color: red;">100rmb</span></span> 
            </p>
            <input type="button" value="点击加入购物车" />
        </li> -->
    </ul>
	
	<div class="car">
		
	</div>
</body>
    <script>
		var st = [
			{
				"id":1,
				"url":"./img/yifu1.jpg",
				"jiage":"100"
			},
			{
				"id":2,
				"url":"./img/yifu2.jpg",
				"jiage":"200"
			},
			{
				"id":3,
				"url":"./img/yifu3.jpg",
				"jiage":"300"
			},
			{
				"id":4,
				"url":"./img/yifu4.jpg",
				"jiage":"400"
			}
		]
		 var str = JSON.stringify(st);
		localStorage.setItem("dongyi",str);  //存入商品数据,供页面载入和购物车页面提取数据；

		 var shuliang = document.querySelectorAll(".shuliang")[0];
		 var shuju = localStorage.getItem("dongyi")
		 var sj = JSON.parse(shuju);
		 var stm = "";
		 
		 let sss = JSON.parse(localStorage.getItem("car"));
		 //页面载入数据；
		 for(i = 0;i<sj.length;i++){
			 stm += `<li>
							<img src="${sj[i].url}">
							<p>
								<span>冬季衣服${sj[i].id}</span>
								<span>价格：<span style="color: red;">${sj[i].jiage}rmb</span></span> 
							</p>
							<input type="button" value="点击加入购物车" dataid = ${sj[i].id} />
					</li>`
		}
		var oUl = document.querySelectorAll(".ul")[0];
		oUl.innerHTML=stm;
		 
		 //给加入购物车按钮添加点击事件
		var inp = document.querySelectorAll("input");
		for(let i = 0;i<inp.length;i++){
		
			inp[i].onclick=()=>{
			
			let carshuju = JSON.parse(localStorage.getItem("car"));
			
			if(carshuju){
				var pan = carshuju.find(function(v,c){
					return v.id === i;
				})
				
				var biao = carshuju.findIndex(function(v,j){
				return v.id === i;
				})

			}else{
				let cart1 =[{"id":i,"shuliang":1}];
				localStorage.setItem("car",JSON.stringify(cart1));
			}
			
			
			if(biao != -1){
				let cart2 = JSON.parse(localStorage.getItem("car"));

			let shu = carshuju[biao].shuliang+1;

			let cart ={"id":i,
				"shuliang":shu};

			cart2.splice(biao,1,cart);

			cart2 = JSON.stringify(cart2);
			localStorage.setItem("car",cart2);

			}else{
				let cart1 = 
					{"id":i,
					"shuliang":1}
				carshuju.push(cart1);
				cart2 = JSON.stringify(carshuju)
				localStorage.setItem("car",cart2)
			}
			let sss = carshuju;
			shuliang.innerHTML = sss.length;
			}
		}
		
    </script>
</html>

购物车页功能实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		.car{
			width: 505px;
			margin: 0 auto;
			padding: 0px;
		}
		li{
			list-style: none;
			width: 500px;
			height: 50px;
			display: flex;
			justify-content: space-between;
			background: #cecece;
			border: blueviolet 2px solid;
			margin: 10px 0px;
			border-radius: 15px;
			padding: 10px;
		}
		img{
			width: 50px;
		}
		img,div{
			float: left;
		}
		div p{
			margin: 0;
			line-height: 25px;
			height: 25px;
			width: 240px;
		}
		li div .jia{
			float: right;
			color: red;
		}
		.biao{
			display: flex;
			justify-content: space-between;
		}
		.shu{
			width: 40px;
			height: 16px;
		}
		.input{
			line-height: 50px;
		}
	</style>
	<body>
		<ul class="car">
			<!-- <li>
				<img src="img/yifu1.jpg" >
				<div>
					<p class="biao"><span>棉衣1</span></p>
					<p><span class="jia">1000rmb</span></p>
				</div>
				
			</li> -->
			<!-- <input type="button" name="" id="" value="" /> -->
		</ul>
	</body>
	<script type="text/javascript">
		function $(id){
			return document.getElementById(id)
		}
		var car = document.querySelectorAll(".car")[0];	//获取购物车ul;
		var shuju =  JSON.parse(localStorage.getItem("car"));//获取localstorage里的"car"数据;
		var liebiao = JSON.parse(localStorage.getItem("dongyi"));
		var st = "";
		
		//遍历数据载入页面
		for(i=0;i<shuju.length;i++){
			st +=	`<li class = "danpin">
						 <img src="${liebiao[shuju[i].id].url}" >
						<div>
							<p class="biao"><span>棉衣${liebiao[shuju[i].id].id}</span></p>
							<p><span class="jia">${liebiao[shuju[i].id].jiage}rmb</span></p>
						</div>
						<div class = "input">
						<input type="button" value = "-" class = "jian"></input>
						<input type="text" value = "${shuju[i].shuliang}" class = "shu"></input>
						<input type="button" value = "+" class = "jiashang"></input>
						<input type="button" value = "点击删除" class = "shan"></input>
						</div>
						
					</li>`
		}
		car.innerHTML = st;
		
		
		function bian(can,id){
			let carshuju = JSON.parse(localStorage.getItem("car"));
			
			var biao = carshuju.findIndex(function(v,j){
			return v.id === id;
			})
			
			let cart2 = JSON.parse(localStorage.getItem("car"));
			let shu1 = carshuju[biao].shuliang+can;
			let cart ={"id":carshuju[biao].id,
				"shuliang":shu1};
			cart2.splice(biao,1,cart);
			cart2 = JSON.stringify(cart2);
			localStorage.setItem("car",cart2);
		}
		
		
		
		var shan = document.querySelectorAll(".shan");
		var jiaan = document.querySelectorAll(".jiashang");
		var jian = document.querySelectorAll(".jian");
		var shu = document.querySelectorAll(".shu");
		for(let i=0;i<jiaan.length;i++){
			jiaan[i].onclick =function(){
			 shu[i].value = Number(shu[i].value)+1;
			bian(1,i);
			}
		}
		
		for(let i=0;i<jian.length;i++){
			jian[i].onclick =function(){
			 
			 if(shu[i].value>1){
				 shu[i].value = Number(shu[i].value)-1;
				 bian(-1,i);
			 }
			}
		}
		
		
		//遍历所有点击按钮
		for(let i = 0;i<shan.length;i++){
			//给每个删除删除按钮添加点击事件
			shan[i].onclick = function(){		
				let ul = document.querySelectorAll(".car")[0];
				let danpin = document.querySelectorAll(".danpin");
				
				ul.removeChild(danpin[i]);		//删除对应的商品项

				// let carshuju = JSON.parse(localStorage.getItem("car"));
				
				
				let cart2 = JSON.parse(localStorage.getItem("car"));  //获取localstorage里的商品数据;
				cart2.splice(i,1);								//删除对应项的商品数据;
				// cart2 = JSON.stringify(cart2);					
				localStorage.setItem("car",JSON.stringify(cart2)); //新数据存入顶替旧数据;
				location.reload();//刷新页面载入新数据;
			}
		}
		
		
	</script>
</html>

cookie购物车待续谢谢大家；