Question

我正在使用Spring Boot 2和Angular 6开发购物车网站，先决条件之一是允许用户即使未经身份验证也可以将产品添加到他们的购物车中。为了实现这一目标，我将添加的产品作为json对象保存到用户浏览器的本地存储中，如您从下图所示。

用户登录时，此数据将合并到数据库表中，该表存储经过身份验证的用户购物车数据以及其他数据。

要管理Web存储，我使用库 ngx-webstorage ：https://www.npmjs.com/package/ngx-webstorage

我写了一个打字稿类来管理存储，我在下面提供：

@Injectable()
export class LocalStorageHelper {

    constructor(private localStorageService: LocalStorageService) { }

    /**
     * Creates an empty cart if no one already exists and returns it.
     */
    private createCart(): Cart {
        const cart = new Cart(1, 0, []);
        this.localStorageService.store('cart', this.toJSONString(cart));
        return cart;
    }

    /**
     * Clears the cart (i.e., when the user logs in successfully).
     */
    public clearCart(): void {
        this.localStorageService.clear('cart');
    }

    public saveCart(cart: Cart): Cart {
        this.localStorageService.store('cart', this.toJSONString(cart));
        return cart;
    }

    /**
     * Converts the local storage cart content into a Cart object for further processing.
     */
    public getCart(): Cart {
        let cart: Cart = this.toJSONObject(this.localStorageService.retrieve('cart'));
        if (cart === null) {
            cart = this.createCart();
        }
        return cart;
    }

    /**
     * Adds a product to the cart, by first, it checks whether that product already exists.
     *
     * @param product the product being added.
     */
    public addToCart(product: Product): Cart {
        const cart = this.getCart();
        const item = cart.items.find(i => i.product.id === product.id);
        if (item === undefined) {
            cart.items.push(new CartItem(1, product.price, product));
        } else {
            item.quantity += 1;
            item.totalAmount += product.price;
        }
        cart.totalAmount += product.price;
        return this.saveCart(cart);
    }

    /**
     * Drops an item from the cart.
     *
     * @param productId id of the product being dropped from the cart.
     */
    public dropFromCart(productId: number): Cart {
        const cart = this.getCart();
        const item = cart.items.find(i => i.product.id === productId);
        if (item !== undefined) {
            cart.totalAmount -= item.totalAmount;
            cart.items.splice(cart.items.indexOf(item, 0), 1);
        }
        return this.saveCart(cart);
    }

    /**
     * Updates the quantity of a product by one with the given one.
     *
     * @param productId id of the product whose quantity is gonna be updated.
     * @param productQty quantity of the product being updated (should be greater than 0).
     */
    public updateItemQuantity(productId: number, productQty: number): Cart {
        if (productQty < 1) {
            return;
        }
        const cart = this.getCart();
        const item = cart.items.find(i => i.product.id === productId);
        if (item !== undefined) {
            const deltaAmount = CartUtil.calculateDeltaAmount(item, productQty);
            item.quantity = productQty;
            item.totalAmount = productQty * item.product.price;
            cart.totalAmount += deltaAmount;
        }
        return this.saveCart(cart);
    }

    /**
     * Converts a string to a JSON.
     *
     * @param value the string being converted.
     */
    private toJSONObject(value: string): any {
        return JSON.parse(value);
    }

    /**
     * Converts a JSON object to a string.
     *
     * @param value the JSOn object being converted.
     */
    private toJSONString(value: any): string {
        return JSON.stringify(value);
    }
}

我不喜欢这种解决方案的原因是，这些数据以清晰的方式公开，而其他在线网站提供了哈希，即

因此，我怀疑要使用哪种格式将购物车内容存储到本地存储中。我现在的做法很好吗，还是有更好的方法呢？

Answer 1

我认为您不应该将购物车的内容本地存储在用户的计算机上。当产品在服务器上发生更改（例如价格更新）时，它很容易不同步。

我建议您在服务器上创建一个匿名购物车，仅存储购物车的标识符。我相信这是您在提及其他解决方案时所指的哈希值。

将购物车存储在服务器上还会为您带来其他好处，例如状态同步。您将能够跟踪购物车的放弃情况。

我应以哪种格式将购物车数据存储在本地存储中

1 个答案: