uni-app 本地缓存的购物车

在uni-app中，本地缓存是存储购物车数据的一种有效方式。uni-app 提供了 uni.setStorage 和 uni.getStorage 等API，可以方便地在本地存储和读取数据。以下是一个简单的购物车本地缓存实现的代码案例。

1. 初始化购物车数据

首先，我们定义一个初始化购物车的函数，用于设置初始数据（如果本地没有缓存数据）。

function initCart() {
    const cart = uni.getStorageSync('cart') || [];
    return cart;
}

2. 添加商品到购物车

接下来，我们定义一个函数来添加商品到购物车。这里假设每个商品对象包含 id 和 quantity 属性。

function addToCart(product) {
    let cart = initCart();
    const productIndex = cart.findIndex(item => item.id === product.id);

    if (productIndex !== -1) {
        cart[productIndex].quantity += product.quantity;
    } else {
        cart.push({ ...product });
    }

    uni.setStorageSync('cart', cart);
}

3. 从购物车移除商品

定义一个函数来从购物车移除商品，可以通过商品ID来移除。

function removeFromCart(productId) {
    let cart = initCart();
    cart = cart.filter(item => item.id !== productId);
    uni.setStorageSync('cart', cart);
}

4. 获取购物车数据

定义一个函数来获取当前的购物车数据。

function getCart() {
    return initCart();
}

5. 示例使用

以下是如何使用上述函数的示例：

// 添加商品到购物车
const newProduct = { id: 1, name: 'Product A', quantity: 2 };
addToCart(newProduct);

// 获取购物车数据
const cartData = getCart();
console.log('Current Cart:', cartData);

// 从购物车移除商品
removeFromCart(1);

// 再次获取购物车数据
const updatedCartData = getCart();
console.log('Updated Cart:', updatedCartData);

总结

上述代码展示了如何使用uni-app的本地存储API来实现一个简单的购物车功能。通过 uni.setStorageSync 和 uni.getStorageSync 方法，我们可以方便地在本地缓存购物车数据，从而实现数据的持久化存储。根据实际需求，你可以进一步扩展这些函数，比如添加商品的价格计算、购物车数据的持久化更新等。