本文介绍了如何使用 JavaScript 和 LocalStorage 在网页上实现收藏功能。用户可以将卡片从主页面添加到单独的收藏页面，并在收藏页面查看已收藏的卡片。文章提供了详细的代码示例，演示了如何将卡片数据存储到 LocalStorage，以及如何在收藏页面读取并显示这些数据。通过本文的学习，读者可以掌握使用 LocalStorage 实现简单收藏功能的方法，并将其应用到自己的项目中。

要在网页上实现收藏功能，允许用户将卡片添加到单独的收藏页面，并且在收藏页面查看已收藏的卡片，一种简单有效的方法是使用浏览器的 LocalStorage。LocalStorage 允许你在用户的浏览器中存储键值对数据，即使在关闭浏览器后数据仍然存在。

实现步骤

1. HTML 结构准备：

   首先，我们需要一个包含卡片的 HTML 结构。每个卡片都需要一个唯一的标识符，以便我们可以在 LocalStorage 中存储和检索它们。

   
     
   
       
   
         
   
           @@##@@
           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.
         
       
     
   

   注意 data-card-id 属性，它用于唯一标识每个卡片。add-to-favorites 类用于选择按钮，以便我们添加点击事件监听器。

2. JavaScript 代码：

   接下来，我们需要编写 JavaScript 代码来处理添加和检索收藏卡片的逻辑。

   

   I-Shop购物系统

   部分功能简介：商品收藏夹功能热门商品最新商品分级价格功能自选风格打印结算页面内部短信箱商品评论增加上一商品，下一商品功能增强商家提示功能友情链接用户在线统计用户来访统计用户来访信息用户积分功能广告设置用户组分类邮件系统后台实现更新用户数据系统图片设置模板管理CSS风格管理申诉内容过滤功能用户注册过滤特征字符IP库管理及来访限制及管理压缩，恢复，备份数据库功能上传文件管理商品类别管理商品添加/修改/

   下载

   // 添加到收藏按钮的点击事件处理函数
   document.addEventListener('DOMContentLoaded', function() {
     const addToFavoritesButtons = document.querySelectorAll('.add-to-favorites');
   
     addToFavoritesButtons.forEach(button => {
       button.addEventListener('click', function() {
         const card = this.closest('.card');
         const cardId = card.dataset.cardId;
   
         // 将卡片ID添加到LocalStorage
         let favorites = JSON.parse(localStorage.getItem('favorites')) || []; // 从LocalStorage获取已收藏的卡片ID列表，如果不存在则初始化为空数组
         if (!favorites.includes(cardId)) {
           favorites.push(cardId); // 将当前卡片ID添加到已收藏列表
           localStorage.setItem('favorites', JSON.stringify(favorites)); // 将更新后的已收藏列表保存到LocalStorage
           alert('Card added to favorites!');
         } else {
           alert('Card already in favorites!');
         }
       });
     });
   });
   
   // 在收藏页面加载时，从LocalStorage检索收藏的卡片并显示
   function displayFavorites() {
     const favorites = JSON.parse(localStorage.getItem('favorites')) || [];
     const favoritesContainer = document.getElementById('favorites-container'); // 假设收藏页面有一个id为"favorites-container"的元素用于显示收藏的卡片
   
     if (favoritesContainer) {
       favorites.forEach(cardId => {
         // 根据cardId创建或获取对应的卡片元素，并添加到favoritesContainer
         // 示例：
         const cardElement = document.querySelector(`.card[data-card-id="${cardId}"]`).cloneNode(true); //克隆节点，避免影响原页面
         favoritesContainer.appendChild(cardElement);
       });
     }
   }
   
   // 如果当前是收藏页面，则调用 displayFavorites 函数
   if (document.getElementById('favorites-container')) {
     displayFavorites();
   }

   这段代码首先获取所有带有 add-to-favorites 类的按钮，并为每个按钮添加一个点击事件监听器。当用户点击按钮时，它会获取卡片的 ID，并将其添加到 LocalStorage 中的 favorites 列表中。

   displayFavorites 函数用于在收藏页面加载时，从 LocalStorage 中检索收藏的卡片 ID，并根据这些 ID 创建相应的卡片元素，然后将它们添加到收藏页面上的一个容器中。

3. 收藏页面 (favorites.html):

   创建 favorites.html 页面，并在其中包含一个用于显示收藏卡片的容器。

   
   
   
     
   
   
     
   Favorites
     
   
       
     
     
   
   

   确保在 favorites.html 页面中包含包含 JavaScript 代码的 script.js 文件。

注意事项

• 数据存储限制： LocalStorage 有存储容量限制（通常为 5MB），因此不适合存储大量数据。
• 数据类型： LocalStorage 只能存储字符串。因此，你需要使用 JSON.stringify() 将对象转换为字符串，并使用 JSON.parse() 将字符串转换回对象。
• 安全性： LocalStorage 数据存储在用户的浏览器中，因此不应存储敏感信息。

总结

通过使用 JavaScript 和 LocalStorage，我们可以轻松地实现一个简单的收藏功能。用户可以将卡片添加到收藏页面，并在需要时查看它们。虽然 LocalStorage 有一些限制，但在许多情况下，它是一个方便且有效的解决方案。对于更复杂的需求，例如需要存储大量数据或处理敏感信息，可以考虑使用数据库或其他服务器端存储方案。