js怎么将购物界面的历史浏览记录记录下来,并且将购物界面的浏览记录添加到个人中心界面,要详细代码
时间: 2024-02-01 08:14:40 浏览: 25
实现浏览记录的功能,可以通过以下步骤进行:
1. 在购物页面,使用localStorage存储浏览记录数据
```javascript
// 获取商品数据
const goodsData = { id: 123, name: '商品1', price: 100 }
// 获取本地存储中的浏览记录数据
let browseList = JSON.parse(localStorage.getItem('browseList')) || []
// 判断该商品是否已经在浏览记录中存在,如果不存在则添加到浏览记录中
if (!browseList.some(item => item.id === goodsData.id)) {
browseList.push(goodsData)
// 保存浏览记录数据到本地存储中
localStorage.setItem('browseList', JSON.stringify(browseList))
}
```
2. 在个人中心页面,通过localStorage获取浏览记录数据并显示到页面上
```javascript
// 获取本地存储中的浏览记录数据
const browseList = JSON.parse(localStorage.getItem('browseList')) || []
// 遍历浏览记录数据并渲染到页面上
browseList.forEach(item => {
const el = document.createElement('div')
el.innerText = `商品名称:${item.name},价格:${item.price}`
document.body.appendChild(el)
})
```
完整代码如下:
```javascript
// 购物页面
const goodsData = { id: 123, name: '商品1', price: 100 }
let browseList = JSON.parse(localStorage.getItem('browseList')) || []
if (!browseList.some(item => item.id === goodsData.id)) {
browseList.push(goodsData)
localStorage.setItem('browseList', JSON.stringify(browseList))
}
// 个人中心页面
const browseList = JSON.parse(localStorage.getItem('browseList')) || []
browseList.forEach(item => {
const el = document.createElement('div')
el.innerText = `商品名称:${item.name},价格:${item.price}`
document.body.appendChild(el)
})
```
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)