js利用localstorage怎么将购物页面的历史浏览记录图片信息添加到个人页面的历史浏览记录
时间: 2024-02-06 07:04:11 浏览: 26
可以通过以下步骤实现:
1. 在购物页面,获取用户浏览的商品信息和图片信息,并将其存储到一个对象中。
2. 将这个对象转换成 JSON 字符串,并将其存储到 localStorage 中。可以使用 localStorage.setItem() 方法实现。
3. 在个人页面,从 localStorage 中获取之前存储的 JSON 字符串,并将其转换成 JavaScript 对象。
4. 遍历这个 JavaScript 对象,将其中的图片信息展示在历史浏览记录中。
以下是一个示例代码:
在购物页面:
```
// 获取商品信息和图片信息
const item = {
id: 1,
name: '商品1',
image: 'http://example.com/image1.jpg'
};
// 将对象转换成 JSON 字符串并存储到 localStorage 中
const history = JSON.parse(localStorage.getItem('history') || '[]');
history.push(item);
localStorage.setItem('history', JSON.stringify(history));
```
在个人页面:
```
// 从 localStorage 中获取之前存储的 JSON 字符串
const history = JSON.parse(localStorage.getItem('history') || '[]');
// 遍历 JavaScript 对象,将其中的图片信息展示在历史浏览记录中
history.forEach(item => {
const image = document.createElement('img');
image.src = item.image;
document.body.appendChild(image);
});
```
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.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)