localStorage的加购物车，添加商品事例

2022-06-10 00:35:34 阅读：148 来源： 互联网

标签：shop function shopList 事例购物车 localStorage var id

//shop.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>

<div>
<input type="text" placeholder="商品名称">
<input type="number" placeholder="请输入商品价格" >
<input type="button" value="添加">
</div>

<ul class="shopList">
</ul>
<script>
//使用localstorage来保存对应的商品列表
//1.获取添加按钮及相关输入框
var inputs = document.querySelectorAll("input")
var shopList = JSON.parse(localStorage.getItem("shopList")) || []
var carList = JSON.parse(localStorage.getItem("car")) || []
console.log(localStorage.getItem("car"));
//2.给按钮添加点击事件
inputs[2].onclick = function(){
var title = inputs[0].value
var price = inputs[1].value
//存储商品的内容有多个用数组来存储
//将对应的内容加入到shopList里面
shopList.push({
id: new Date().getTime(), //getTime获取时间挫他一般用于做唯一区分
title:title,
price:price
})
//3.将对应的商品存储在localstorage中
localStorage.setItem("shopList",JSON.stringify(shopList))
//刷新页面
window.location.reload()
}
//4.生成对应的li 加入到商品列表中
window.onload = function(){
shopList.forEach(function(shop){
document.querySelector("ul").innerHTML += `
<li>
id:${shop.id} 名称:${shop.title} 价格:$${shop.price}
<a href="" onclick="deleteById(${shop.id})">删除商品</a>
<a href="" onclick="saveToCar(${shop.id})">加入购物车</a>
</li>
`
});
}
//删除商品的功能及加入购物车的功能
//给对应的a标签加点击事件
//删除对应的localstorage里面的值
function deleteById(id){
//获取这个对应的localstorage的商品列表然后进行比对进行删除
let deleteIndex = 0
shopList.forEach(function(shop,index){
if(shop.id == id){
deleteIndex = index
}
})
shopList.splice(deleteIndex,1)
//重新设置到localstorage
localStorage.setItem("shopList",JSON.stringify(shopList))
//重新渲染
// window.location.reload()
}
//加入购物车
function saveToCar(id){
//判断是否存在对应的商品默认没有
var flag
//判断我对应的商品是否已经加入购物车如果加入的话就改变的对应的数量
carList.forEach(function(shop,index){
if(shop.id == id){
flag = index
}
})
var cloneShop = {}
shopList.forEach(function(shop){
if(shop.id == id){
cloneShop = shop
}
})
if(flag+1){
//修改对应的商品数量
carList[flag].count ++
}else{//如果没有的话就添加进行添加
cloneShop.count = 1
carList.push(cloneShop)
}
//重新把对应的数组设置到localStorage里面去
localStorage.setItem("car",JSON.stringify(carList))
return false
}
</script>
</body>
</html>

//car.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>我的购物车</h1>
<ul></ul>
<script>
var carList = JSON.parse(localStorage.getItem("car")) || []
//读取对应的localstorage里面的购物车内容渲染
carList.forEach(function(shop){
document.querySelector("ul").innerHTML += `
<li>
id:${shop.id} 名称:${shop.title} 价格:$${shop.price} 数量:${shop.count}
</li>
`
});
</script>
</body>
</html>

标签：shop,function,shopList,事例,购物车,localStorage,var,id
来源： https://www.cnblogs.com/kakaya/p/16361688.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

localStorage的加购物车，添加商品事例