本文档将指导你如何使用 JavaScript 和 LocalStorage 实现一个简单的网页收藏功能。通过该功能，用户可以将网页上的卡片添加到收藏夹，并在独立的 "favorites.html" 页面中查看收藏的卡片列表。本文将提供详细的代码示例和步骤，帮助你理解和实现这一功能。
使用 LocalStorage 实现收藏功能
要实现将卡片添加到收藏夹并在另一个页面显示的功能，我们需要在客户端存储卡片信息。由于不需要服务器端数据库，LocalStorage 是一个合适的选择。LocalStorage 允许我们在用户的浏览器中存储键值对，即使关闭浏览器，数据也会保留。
基本思路:
- 添加按钮事件: 为每个卡片上的“添加”按钮绑定一个 JavaScript 函数。
- 存储卡片数据: 当点击“添加”按钮时，将卡片的相关信息（例如，标题、图片 URL、内容）存储到 LocalStorage 中。
- 在收藏页面显示: 在 favorites.html 页面加载时，从 LocalStorage 中读取已存储的卡片信息，并动态生成 HTML 代码来显示这些卡片。
详细步骤：
1. HTML 结构 (index.html):
首先，确保你的 HTML 结构包含卡片和“添加”按钮。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Card Example</title>
<!-- 引入 Materialize CSS (可选，仅用于样式) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<div class="row">
<div class="col s12 m6">
<div class="card">
<div class="card-image">
<img src="images/sample-1.jpg" alt="Sample Image">
<span class="card-title">Card Title</span>
<button onclick="addToFavorites(this)" class="btn-floating halfway-fab waves-effect waves-light red"><i class="material-icons">add</i></button>
</div>
<div class="card-content">
<p>I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.</p>
</div>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>注意:
- onclick="addToFavorites(this)" 将按钮自身传递给 addToFavorites 函数，方便获取卡片信息。
- 引入了 Materialize CSS 框架，用于美化卡片样式 (可选)。
2. JavaScript 代码 (script.js):
创建 script.js 文件，并编写以下代码：
function addToFavorites(button) {
// 获取卡片元素
const card = button.closest('.card');
// 获取卡片信息
const imageSrc = card.querySelector('.card-image img').src;
const cardTitle = card.querySelector('.card-title').textContent;
const cardContent = card.querySelector('.card-content p').textContent;
// 从 localStorage 中获取现有的收藏夹
let favorites = JSON.parse(localStorage.getItem('favorites')) || [];
// 创建卡片对象
const cardData = {
imageSrc: imageSrc,
cardTitle: cardTitle,
cardContent: cardContent
};
// 将卡片添加到收藏夹
favorites.push(cardData);
// 将更新后的收藏夹保存回 localStorage
localStorage.setItem('favorites', JSON.stringify(favorites));
alert('Card added to favorites!'); // 可选：提示用户
}代码解释:
- addToFavorites(button) 函数接收点击的按钮元素。
- button.closest('.card') 向上查找最近的包含 .card 类的父元素，即卡片元素。
- 从卡片元素中提取图片 URL、标题和内容。
- localStorage.getItem('favorites') 从 LocalStorage 中获取名为 "favorites" 的数据。如果不存在，则返回 null。
- JSON.parse() 将从 LocalStorage 获取的 JSON 字符串转换为 JavaScript 数组。如果获取的数据为 null，则使用 || [] 创建一个空数组。
- 创建一个包含卡片信息的 cardData 对象。
- 将 cardData 对象添加到 favorites 数组中。
- JSON.stringify() 将 favorites 数组转换为 JSON 字符串。
- localStorage.setItem('favorites', JSON.stringify(favorites)) 将 JSON 字符串保存到 LocalStorage 中，键名为 "favorites"。
- (可选) 显示一个提示信息，告知用户卡片已添加到收藏夹。
3. favorites.html 页面:
创建 favorites.html 文件，用于显示收藏的卡片。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Favorites</title>
<!-- 引入 Materialize CSS (可选，仅用于样式) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
</head>
<body>
<h1>Favorites</h1>
<div id="favorites-container" class="row">
<!-- 卡片将动态添加到这里 -->
</div>
<script>
// 从 localStorage 中获取收藏夹
const favorites = JSON.parse(localStorage.getItem('favorites')) || [];
// 获取容器元素
const container = document.getElementById('favorites-container');
// 遍历收藏夹，并动态生成卡片
favorites.forEach(card => {
const cardDiv = document.createElement('div');
cardDiv.classList.add('col', 's12', 'm6');
cardDiv.innerHTML = `
<div class="card">
<div class="card-image">
<img src="${card.imageSrc}" alt="Favorite Image">
<span class="card-title">${card.cardTitle}</span>
</div>
<div class="card-content">
<p>${card.cardContent}</p>
</div>
</div>
`;
container.appendChild(cardDiv);
});
</script>
</body>
</html>代码解释:
- 从 LocalStorage 中获取名为 "favorites" 的数据，并将其解析为 JavaScript 数组。
- 获取 id 为 favorites-container 的容器元素。
- 使用 forEach 循环遍历 favorites 数组。
- 对于每个卡片对象，动态创建一个 div 元素，并设置其 class 为 col s12 m6 (用于 Materialize CSS 的响应式布局)。
- 使用模板字符串动态生成卡片的 HTML 代码，并将卡片信息插入到相应的位置。
- 将生成的卡片 div 元素添加到 favorites-container 容器中。
注意事项:
- LocalStorage 存储的数据是字符串，因此需要使用 JSON.stringify() 将 JavaScript 对象转换为 JSON 字符串，并使用 JSON.parse() 将 JSON 字符串转换为 JavaScript 对象。
- LocalStorage 的存储空间有限，通常为 5MB 或 10MB。因此，不适合存储大量数据。
- LocalStorage 存储的数据是明文存储在用户的浏览器中，因此不适合存储敏感信息。
- 本示例使用了 Materialize CSS 框架，用于美化卡片样式。你可以根据自己的需要选择其他的 CSS 框架或自定义样式。
总结:
通过以上步骤，你已经成功实现了一个简单的网页收藏功能。用户可以将网页上的卡片添加到收藏夹，并在独立的 favorites.html 页面中查看收藏的卡片列表。你可以根据自己的需求扩展此功能，例如添加删除收藏的功能、对收藏的卡片进行排序等。
