Should I use local storage or a shared data service for my use case?

Ionic Framework ionic-v3
1

Building a shopping cart type app. I need to temporarily store some information so people can order multiple items (i.e. store the product id, product name, quantity etc). So users will search for a product, add to cart, search for a product, add it to a cart and on and on until this click place order. When they click place order that is when I want everything to be stored in my remote database.

What is the best way to temporarily store this data local storage or a service? How would I create a service to store multiple items per one order?

2

Local storage is only needed if you want the data to persist across app restarts. As for storing multiple items in an order, you can just do something like this:

@Injectable() export class CartService {
  items = [] as Product[];
  addItem(item: Product): void {
    this.items.push(item);
  }
}
3

@nb1990 Aaron Saunders (https://forum.ionicframework.com/u/aaronksaunders/summary), which often helps many people here, suggested another solution around local storage, which is to use an independant local storage library with a micro-framework (I can’t remember which micro js framework). But he said, this kind of micro framework was great, because it enables you to store anything simply in local storage, before, and if you have the need to push it to any webservice/API later.

Feel free to ask him, he helped so many people in this forum (including me), I think he would answer you.

4

Thanks for the reply. What if I need to enter information for each individual item added like productID, quantity, productName? How would I push the individual information into the array and not just a single product? Should I create an interface like this

export interface Order {
      productID: string;
      quantity: string; 
      productName: string;
}

and than would I be able to push it to the array like this? (I am not at the point of coding this yet I am mapping out my project so once I get going I dont have to do much research)

    @Injectable() export class CartService {
        items = [] as Order[];
        addItem(item: Order): void {
        this.items.push({ productID: o.prodID
                          quantity: o.quantity;
                          productName: o.prodName });
       }
5

The interface looks great, but you’re making extra work for yourself with that push, unless you’re worried about pass-by-reference concerns. You could just do this:

orders = [] as Order[];
addItem(order: Order): void { 
  this.orders.push(order); 
}
6

Only thing I’m confused about is where to assign the value to the keys…In my example I’m doing it like this productID: o.prodID but in yours how would it be done? The prodName and prodDesc will come from parameters passed from the other page but quantity will be entered as an input value on a form

7

In whoever is calling addItem():

prodName: string;
prodDesc: string;
quantity: string;
constructor(private _cart: ShoppingCart, np: NavParams) {
  this.prodName = np.get('prodName');
  this.prodDesc = np.get('prodDesc');
}

makeOrder(): void {
  this._cart.addItem({prodName: this.prodName, prodDesc: this.prodDesc, this.quantity});
}

Another option would be to have an order: Order property in the page, assign to its parts as we are doing with the three separate object properties, and then just call this._cart.addItem(this.order). Whatever seems cleaner to you.