В каком формате хранить данные корзины в локальном хранилище? - PullRequest
0 голосов
/ 10 февраля 2019

Я разрабатываю веб-сайт корзины покупок с использованием Spring Boot 2 и Angular 6, и одним из обязательных условий является предоставление пользователям возможности добавлять товары в свою корзину, даже если они не прошли проверку подлинности.Для достижения этой цели я сохраняю добавленные продукты в локальном хранилище браузера пользователя в виде объектов json, как показано на рисунке ниже.

enter image description here

Когда пользователь входит в систему, эти данные объединяются в таблицу базы данных, в которой хранятся аутентифицированные данные корзины пользователя, наряду с другими его данными.

Для управления веб-хранилищем я использую библиотеку 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);
    }
}

Что мне не нравится в этом решении, так это то, что эти данныеоткрыты в открытом виде, в то время как другие веб-сайты в Интернете предоставляют хэш, то есть

enter image description here

Поэтому я сомневаюсь в том, какой формат использовать для хранения содержимого корзины в локальномместо хранения.Это нормально, как я это делаю сейчас, или есть лучший способ сделать это?

1 Ответ

0 голосов
/ 10 февраля 2019

Не думаю, что вы должны хранить содержимое корзины локально на компьютере пользователя.Это может легко выйти из синхронизации, когда продукт изменяется на сервере (например, цена обновляется).

Я бы предложил вам создать анонимную корзину на сервере и хранить только идентификатор корзины.Я полагаю, что это хеш, на который вы ссылаетесь при упоминании других решений.

Хранение корзины на сервере даст вам и другие преимущества, помимо синхронизации состояния, например.Вы сможете отслеживать оставление тележек.

...