本文档将指导你如何使用 JavaScript 和 LocalStorage 实现一个简单的网页收藏功能。通过该功能，用户可以将网页上的卡片添加到收藏夹，并在独立的 "favorites.html" 页面中查看收藏的卡片列表。本文将提供详细的代码示例和步骤，帮助你理解和实现这一功能。

使用 LocalStorage 实现收藏功能

要实现将卡片添加到收藏夹并在另一个页面显示的功能，我们需要在客户端存储卡片信息。由于不需要服务器端数据库，LocalStorage 是一个合适的选择。LocalStorage 允许我们在用户的浏览器中存储键值对，即使关闭浏览器，数据也会保留。

基本思路:

1. 添加按钮事件: 为每个卡片上的“添加”按钮绑定一个 JavaScript 函数。
2. 存储卡片数据: 当点击“添加”按钮时，将卡片的相关信息（例如，标题、图片 URL、内容）存储到 LocalStorage 中。
3. 在收藏页面显示: 在 favorites.html 页面加载时，从 LocalStorage 中读取已存储的卡片信息，并动态生成 HTML 代码来显示这些卡片。

详细步骤：

1. HTML 结构 (index.html):

首先，确保你的 HTML 结构包含卡片和“添加”按钮。

    
    
    
    
    
    




    
        
            
                @@##@@
                Card Title
                add
            
            
                
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.
            
        
    

注意:

• 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 文件，用于显示收藏的卡片。

    
    
    
    
    



Favorites


    

代码解释:

• 从 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 页面中查看收藏的卡片列表。你可以根据自己的需求扩展此功能，例如添加删除收藏的功能、对收藏的卡片进行排序等。