在html中有两个网页,商品页和购物车页,在商品页中选中某商品,购物车页中自动生成同样的商品,原生js如何实现这一功能?用代码实现
时间: 2024-05-07 15:21:37 浏览: 43
可以使用本地存储来实现这一功能。当在商品页选中某商品时,将该商品信息存储到本地存储中,然后在购物车页中读取本地存储中的商品信息生成相应的商品列表。
以下是一个简单的实现方法:
在商品页中添加一个按钮或复选框,当选中时触发一个函数,将该商品信息存储到本地存储中:
```javascript
function addToCart(item) {
// 获取商品信息
var itemId = item.id;
var itemName = item.name;
var itemPrice = item.price;
// 创建一个对象表示商品信息
var cartItem = {
id: itemId,
name: itemName,
price: itemPrice
};
// 将商品信息存储到本地存储中
var cartItems = JSON.parse(localStorage.getItem('cartItems')) || [];
cartItems.push(cartItem);
localStorage.setItem('cartItems', JSON.stringify(cartItems));
}
```
在购物车页中读取本地存储中的商品信息,生成相应的商品列表:
```javascript
function renderCart() {
// 从本地存储中获取商品信息
var cartItems = JSON.parse(localStorage.getItem('cartItems')) || [];
// 生成商品列表
var cartList = document.getElementById('cartList');
cartList.innerHTML = '';
cartItems.forEach(function(item) {
var li = document.createElement('li');
li.innerHTML = item.name + ' - ' + item.price;
cartList.appendChild(li);
});
}
```
在页面加载时调用 `renderCart()` 函数,即可在购物车页中自动生成相应的商品列表。
注意,这只是一个简单的实现方法,实际应用中需要考虑更多的细节,如商品数量、重复添加等情况。
阅读全文