js本地储存购物车案例
时间: 2023-08-06 09:18:00 浏览: 47
好的,下面是一个简单的使用本地存储的购物车案例:
```html
<!DOCTYPE html>
<html>
<head>
<title>购物车</title>
<script type="text/javascript">
// 初始化购物车
if (!localStorage.getItem('cart')) {
localStorage.setItem('cart', JSON.stringify({}));
}
// 添加商品到购物车
function addToCart(id, name, price, qty) {
var cart = JSON.parse(localStorage.getItem('cart'));
if (!cart[id]) {
cart[id] = {name: name, price: price, qty: qty};
} else {
cart[id].qty += qty;
}
localStorage.setItem('cart', JSON.stringify(cart));
}
// 显示购物车
function showCart() {
var cart = JSON.parse(localStorage.getItem('cart'));
var items = Object.keys(cart).map(function(key) {
var item = cart[key];
return '<li>' + item.name + ' - ¥' + item.price + ' × ' + item.qty + '</li>';
});
document.getElementById('cart-items').innerHTML = items.join('');
}
</script>
</head>
<body onload="showCart()">
<h1>购物车</h1>
<ul id="cart-items"></ul>
<hr>
<h2>商品列表</h2>
<ul>
<li>
商品1 - ¥100
<button onclick="addToCart(1, '商品1', 100, 1)">加入购物车</button>
</li>
<li>
商品2 - ¥200
<button onclick="addToCart(2, '商品2', 200, 1)">加入购物车</button>
</li>
<li>
商品3 - ¥300
<button onclick="addToCart(3, '商品3', 300, 1)">加入购物车</button>
</li>
</ul>
</body>
</html>
```
该例子中,我们使用了 localStorage 来储存购物车中的商品信息。在页面加载时,我们使用 `localStorage.getItem('cart')` 获取购物车信息。如果购物车信息不存在,我们通过 `localStorage.setItem('cart', JSON.stringify({}))` 初始化购物车信息为一个空对象。
当用户点击“加入购物车”按钮时,我们将商品信息添加到购物车中。我们通过 `JSON.parse(localStorage.getItem('cart'))` 获取购物车信息,然后根据商品 ID 判断该商品是否已经存在于购物车中。如果不存在,则添加一个新的条目,否则增加该商品的数量。最后,我们使用 `localStorage.setItem('cart', JSON.stringify(cart))` 更新购物车信息。
在页面加载和添加商品到购物车后,我们调用 `showCart()` 函数来显示购物车中的商品列表。该函数首先获取购物车信息,并根据购物车中的每个条目生成一个列表项。最后,我们使用 `document.getElementById('cart-items').innerHTML = items.join('')` 将列表项添加到页面中。
希望这个例子能够帮助你理解如何使用本地存储来实现购物车功能。