Ionic with Storage

Ionic Framework ionic-v3
1

I am using ionic 3 with storage.

First, i import storage in the app.module.ts

import { IonicStorageModule } from '@ionic/storage';

imports: [
IonicStorageModule.forRoot()
]

I developed Ecommerce app.If I add to any product to cart using storage.

this.items.push(item);
this.storage.set('products',this.items);

item is a product detail.and I have displayed the cart count.

this.storage.get('products').then((data) => {
     if(data != null)
     {
       this.Cartproducts=data;
       console.log(this.Cartproducts);

     }
    });

here is my consoled value.

 [
    {
        'Product_title':'Product name',
        'Product desc':'product dec',
        'id':1
    },
    {
        'Product_title':'Product name',
        'Product desc':'product dec'
        'id':2
    }
]

If i need remove the last product.

 this.Cartproducts.splice(i, 1);
 console.log(this.Cartproducts);
 this.storage.remove('products');
 this.storage.set('products',this.Cartproducts);

Here is my consoled value.

[
    {
        'Product_title':'Product name',
        'Product desc':'product dec',
        'id':1
    }
]

I remove the storage value in ‘products’ Again I set the value products

I I need another product.so I am going to the product page and add the product.

But my result is

[
    {
        'Product_title':'Product name',
        'Product desc':'product dec',
        'id':1
    },
    {
        'Product_title':'Product name',
        'Product desc':'product dec'
        'id':2
    },
    {
        'Product_title':'Product name',
        'Product desc':'product dec'
        'id':3
    }
]

But Actually, I remove the second product.Did not set to storage why?

Kindly advice me,

Thanks

2

You don’t show us how i is set, so we have no way of knowing why you are not removing the desired product. That being said, if this sort of action is common, your data structure is not very efficient. I would recommend storing each product separately keyed by its id, in which case removal (and addition) becomes a much cheaper operation.

3

Thanks for ur reply.

Here is my Cart page

<ion-row class="apply-coupon" *ngFor="let p of Cartproducts;let i=index">
   <ion-col col-4>
   	<img src="{{p.P_IMAGES[0].URL}}" alt="product2">
   </ion-col>
   <ion-col col-8>
   	<h1>{{p.P_TITLE}}</h1>
   	<p class="subtitle">Subtitle</p>
   	<p class="code">Code: 123</p>
   	<div>
   		<button (click)="cancel(i)">Cancel X</button>
   	</div>
   </ion-col>	
</ion-row>

I set i is index value.