利用本地存储实现购物车
<!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">
<script src="./js/jquery-3.4.1.min.js"></script>
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#bigBox {
width: 1200px;
height: 400px;
border: 1px solid;
margin: 70px auto;
}
#box {
width: 550px;
height: 400px;
border: 1px solid;
overflow: hidden;
float: left;
}
#box ul {
width: 33%;
height: 50%;
float: left;
list-style: none;
}
#box li {
text-align: center;
}
#box li:last-child {
color: red;
font-size: 15px;
}
#box img {
width: 140px;
height: 150px;
}
#storage {
width: 648px;
height: 400px;
border: 1px solid;
float: left;
text-align: center;
}
#container {
width: 100%;
}
#container img {
width: 50px;
height: 53px;
}
#table {
width: 100%;
}
#table img {
width: 50px;
height: 53px;
}
</style>
</head>
<body>
<div id="bigBox">
<div id="box">
<ul>
<li class="liimg"><img src="./img/oppo.jpg" alt=""></li>
<li class="litext">oppo</li>
<li class="price">¥1200</li>
</ul>
<ul>
<li class="liimg"><img src="./img/vivo.jpg" alt=""></li>
<li class="litext">vivo</li>
<li class="price">¥2300</li>
</ul>
<ul>
<li class="liimg"><img src="./img/三星.jpg" alt=""></li>
<li class="litext">三星</li>
<li class="price">¥13000</li>
</ul>
<ul>
<li class="liimg"><img src="./img/华为.jpg" alt=""></li>
<li class="litext">华为</li>
<li class="price">¥7888</li>
</ul>
<ul>
<li class="liimg"><img src="./img/小米.jpg" alt=""></li>
<li class="litext">小米</li>
<li class="price">¥4500</li>
</ul>
<ul>
<li class="liimg"><img src="./img/苹果.jpg" alt=""></li>
<li class="litext">苹果</li>
<li class="price">¥9999</li>
</ul>
</div>
<div id="storage">
<table id="container" border="1">
<tr id="tr">
<td>商品图片</td>
<td>商品名称</td>
<td>商品价格</td>
<td>商品数量</td>
</tr>
<table id="table" border="1"></table>
</table>
</div>
</div>
</body>
<script>
var arr = []
if (localStorage.getItem('litext')) {
arr = JSON.parse(localStorage.getItem('litext'))
arr.forEach(function (item, index) {
$('#table').append(`<tr><td><img src='${item.liimg}'></img></td><td>${item.litext}</td><td>${item.price}</td><td>${item.num}</td></tr>`)
})
}
$('#box>ul').on('click', function () {
var liimg = $(this).children('li').children('img').attr('src')
var litext = $(this).children('.litext').text()
var price = $(this).children('.price').text()
var obj = {
liimg: liimg,
litext: litext,
price: price,
num: 1
}
var flag = true
arr.forEach(function (item) {
if (item.litext == obj.litext) {
item.num++;
flag = false
}
})
if (flag) {
arr.push(obj)
}
localStorage.setItem('litext', JSON.stringify(arr))
$('#table').empty()
arr.forEach(function (item, index) {
$('#table').append(`<tr><td><img src='${item.liimg}'></img></td><td>${item.litext}</td><td>${item.price}</td><td>${item.num}</td></tr>`)
})
})
</script>
</html>
思路:
将你点击的商品存进本地存储中,在从本地存储中拿出你存进去的数据渲染到你的页面上