当前位置：首页 > news >正文

浏览器本地存储——使用localStorage实现电商系统商品收藏功能实战

news 2025/7/15 18:07:55

本文是对之前的浏览器本地存储：Web Storage详解一文的实战案例，主要使用localStorage实现一个电商系统商品收藏功能的小案例，包含需求分析、实现步骤以及代码实现等等。

本文目录

- - 1.1 需求分析
  - - 1.2 实现步骤
    - 1.3 商品收藏功能代码实现

1.1 需求分析

在电商系统中，用户可以收藏商品，收藏的商品信息会被保存到 localStorage 中，并且在页面刷新或重新打开时依然可以查看收藏列表。

1.2 实现步骤

添加收藏功能：当用户点击收藏按钮时，将商品信息（如商品 ID、名称、价格等）存储到 localStorage 中。
显示收藏列表：页面加载时，从 localStorage 中读取收藏的商品信息并显示在页面上。
取消收藏功能：用户可以取消收藏，取消后从 localStorage 中移除对应的商品信息。

1.3 商品收藏功能代码实现

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>商品收藏功能</title>
</head><body><h2>商品列表</h2><ul id="product-list"><li data-id="1" data-name="手机" data-price="2999">手机 - 2999 元 <button class="collect">收藏</button></li><li data-id="2" data-name="电脑" data-price="5999">电脑 - 5999 元 <button class="collect">收藏</button></li></ul><h2>收藏列表</h2><ul id="favorite-list"></ul><script>// 页面加载时显示收藏列表window.onload = function () {showFavoriteList();};// 收藏按钮点击事件const collectButtons = document.querySelectorAll('.collect');collectButtons.forEach(button => {button.addEventListener('click', function () {const product = this.parentNode;const productId = product.dataset.id;const productName = product.dataset.name;const productPrice = product.dataset.price;// 获取已收藏的商品列表let favorites = JSON.parse(localStorage.getItem('favorites')) || [];// 检查商品是否已收藏const isFavorite = favorites.some(item => item.id === productId);if (!isFavorite) {// 添加到收藏列表favorites.push({ id: productId, name: productName, price: productPrice });localStorage.setItem('favorites', JSON.stringify(favorites));showFavoriteList();}});});// 显示收藏列表function showFavoriteList() {const favoriteList = document.getElementById('favorite-list');favoriteList.innerHTML = '';const favorites = JSON.parse(localStorage.getItem('favorites')) || [];favorites.forEach(item => {const li = document.createElement('li');li.textContent = `${item.name} - ${item.price} 元 <button class="uncollect" data-id="${item.id}">取消收藏</button>`;favoriteList.appendChild(li);});// 取消收藏按钮点击事件const uncollectButtons = document.querySelectorAll('.uncollect');uncollectButtons.forEach(button => {button.addEventListener('click', function () {const productId = this.dataset.id;let favorites = JSON.parse(localStorage.getItem('favorites')) || [];favorites = favorites.filter(item => item.id !== productId);localStorage.setItem('favorites', JSON.stringify(favorites));showFavoriteList();});});}</script>
</body></html>