购物车开发实战——用JS实现本地存储和增删功能

前端

2023-03-07 00:07:47

使用 JavaScript 构建一个动态购物车：分步指南

简介

购物车是任何电子商务网站的关键组成部分，它使客户能够浏览、选择并最终购买商品。在本文中，我们将逐步介绍如何使用 JavaScript 从头开始构建一个动态购物车。

必备知识

在开始之前，您需要熟悉以下核心概念：

JavaScript： 一种前端开发语言，用于创建交互式网页和 Web 应用程序。
面向对象编程 (OOP)： 一种编程范例，专注于使用对象来组织代码。
本地存储 (localStorage)： 一种 HTML5 API，用于在客户端存储数据，即使在浏览器关闭后也不会丢失。

步骤 1：创建购物车对象

我们的购物车将由一个 JavaScript 对象表示，该对象将包含购物车中的商品及其相关信息。首先，我们创建一个 ShoppingCart 类：

class ShoppingCart {
  constructor() {
    this.items = [];
  }

  addItem(item) {
    this.items.push(item);
  }

  removeItem(item) {
    const index = this.items.indexOf(item);
    if (index > -1) {
      this.items.splice(index, 1);
    }
  }

  getItems() {
    return this.items;
  }
}

步骤 2：添加商品到购物车

要将商品添加到购物车，我们使用 addItem() 方法：

cart.addItem({
  id: 1,
  name: "苹果",
  price: 2.99
});

步骤 3：从购物车中删除商品

要从购物车中删除商品，我们使用 removeItem() 方法：

cart.removeItem({
  id: 1,
  name: "苹果",
  price: 2.99
});

步骤 4：获取购物车中的商品列表

要获取购物车中的商品列表，我们使用 getItems() 方法：

const items = cart.getItems();

console.log(items);

步骤 5：将购物车数据存储到本地存储

为了即使在浏览器关闭后也能访问购物车数据，我们将其存储在本地存储中：

localStorage.setItem("cart", JSON.stringify(cart.getItems()));

步骤 6：从本地存储中读取购物车数据

要从本地存储中读取购物车数据，我们首先将其解析为 JavaScript 对象，然后使用该对象重新创建 ShoppingCart 实例：

const cartData = JSON.parse(localStorage.getItem("cart"));

const cart = new ShoppingCart();
cart.items = cartData;

步骤 7：展示购物车

最后，我们将购物车中的商品列表展示在网页上：

<table>
  <thead>
    <tr>
      <th>商品</th>
      <th>价格</th>
    </tr>
  </thead>
  <tbody>
    {% for item in cart.getItems() %}
    <tr>
      <td>{{ item.name }}</td>
      <td>{{ item.price }}</td>
    </tr>
    {% endfor %}
  </tbody>
</table>