用localStorage写一个简单的购物车代码
时间: 2024-05-06 15:16:33 浏览: 11
好的,以下是一个简单的购物车代码,使用localStorage进行本地存储:
```html
<!DOCTYPE html>
<html>
<head>
<title>购物车</title>
</head>
<body>
<h1>购物车</h1>
<ul id="cart"></ul>
<hr>
<h2>商品列表</h2>
<ul>
<li>商品1 <button onclick="addToCart('商品1', 10)">加入购物车</button></li>
<li>商品2 <button onclick="addToCart('商品2', 20)">加入购物车</button></li>
<li>商品3 <button onclick="addToCart('商品3', 30)">加入购物车</button></li>
</ul>
<script>
// 添加商品到购物车
function addToCart(name, price) {
// 获取购物车数据
let cart = JSON.parse(localStorage.getItem('cart')) || [];
// 查找是否已存在该商品
let existingItem = cart.find(item => item.name === name);
if (existingItem) {
// 已存在,增加数量
existingItem.quantity++;
} else {
// 不存在,添加新商品
cart.push({name: name, price: price, quantity: 1});
}
// 保存购物车数据
localStorage.setItem('cart', JSON.stringify(cart));
// 刷新购物车展示
showCart();
}
// 展示购物车
function showCart() {
// 获取购物车数据
let cart = JSON.parse(localStorage.getItem('cart')) || [];
// 清空展示列表
let cartList = document.getElementById('cart');
cartList.innerHTML = '';
// 遍历购物车数据,渲染列表项
cart.forEach(item => {
let li = document.createElement('li');
li.innerText = `${item.name} x ${item.quantity} = ${item.price * item.quantity}`;
cartList.appendChild(li);
});
}
// 初始化页面
showCart();
</script>
</body>
</html>
```
代码中,每次点击“加入购物车”按钮时,会将商品的名称和价格添加到购物车中。购物车数据使用localStorage进行本地存储,以便在页面刷新后仍能保持之前的数据。同时,每次更新购物车数据后,会调用showCart函数重新渲染购物车展示列表。