<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>发送页</title>
</head>
<body>
<span class="q">1</span>
<span class="w">尚</span>
<p>10000</p>
<img src="z.jpg" alt="">
<button class="btn-favorite">
</button>
<script>
// 点击收藏按钮时,将商品信息保存到 localStorage 中
const btn = document.querySelector('.btn-favorite');
btn.onclick = function() {
// 获取产品信息
const product = {
id: document.querySelector('.q').innerHTML,
name: document.querySelector('.w').innerHTML,
price: document.querySelector('p').innerHTML,
imgUrl: document.querySelector('img').getAttribute('src'),
};
// 将产品信息转成 JSON 字符串,并保存到 localStorage 中
const productStr = JSON.stringify(product);
localStorage.setItem('favorite_product', productStr);
};
</script>
</body>
</html>
下面是接收页:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="products-container"></div>
<script>
// 读取本地存储中的商品信息,并展示在页面中
const favoriteProduct = localStorage.getItem('favorite_product');
if (favoriteProduct) {
const product = JSON.parse(favoriteProduct);
const productsContainer = document.querySelector('.products-container');
// 创建商品元素
const productEl = document.createElement('div');
productEl.classList.add('product');
productEl.innerHTML = `
<img src="${product.imgUrl}" alt="${product.name}">
<h3>${product.name}</h3>
<p>价格:${product.price}</p>
`;
// 将商品元素添加到商品列表中
productsContainer.appendChild(productEl);
}
</script>
</body>
</html>