Items not being saved to localStorage

Maureen Moore

It would appear that the onSubmit function below is saving to localStorage but I deployed the code to the Web and when I refreshed the page, the shopping cart got emptied. I can't test the code after every modification because I'm in development mode and the page re-compiles when it's refreshed but I can test it with the deleteItem function which uses splice. Splice only works on an array and when I click the delete button, the product gets cleared so that tells me it's not using localStorage.

In the component:

items = [];
public onSubmit(thumbnail, quantity, product_name, product_price){
const data = {
thumbnail,
quantity,
product_name,
product_price
};
localStorage.setItem('items', JSON.stringify(data));
this.items.push(JSON.parse(localStorage.getItem('items')));
this.isSubmitted = true;
}
deleteItem(i){
this.items.splice(i,1);
}

In the HTML:

<tr *ngFor="let item of items; let i = index">
<td>
<button type="button" (click)="deleteItem(i)">Xbutton>td>
<td><img src="{{item.thumbnail}}" />td>
<td>{{item.quantity}} td>
<td>{{item.product_name }} td>
<td>{{item.product_price }} td>
<td>{{item.quantity * item.product_price }}td>
tr>

12 Replies

Know the answer? Post it — somebody with the same question will find it here.

Varun Setia6y ago
Hi Maureen, is it resolved?
+1
Varun Setia6y ago
Just use this.items.push(JSON.parse(localStorage.getItem('items'))) instead of items=localStorage.getItem('items')
+1
Varun Setia6y ago
JSON.parse() should have been called before assignment. I missed that !! Please try!
+1
Maureen Moore6y ago
I also get the error Type 'string' is not assignable to type 'any[]' for this line of code:
this.items = localStorage.getItem('items');
+2
Varun Setia6y ago
Things are getting bit messy, what part is working and what is not? As per me your on page refresh should initialise the value in localstorage, rest part was working correctly?
+1
Maureen Moore6y ago
Thanks, Varun Setia, but you're still using splice() which tells me that you're not saving to localStorage. If you were saving to localStorage, you would need to use localStorage.removeItem()
+2
Maureen Moore6y ago
Thanks, Varun Setia, but I get the following error:
This condition will always return 'false' since the types 'boolean' and 'string' have no overlap.
if(!typeof(localStorage.getItem('this.items'))=="undefined")
+2
Varun Setia6y ago
1. items = [];
2. if(!typeof(localStorage.getItem('items'))=="undefined"){
3. items = localStorage.getItem('items');
4. }
5. public onSubmit(thumbnail, quantity, product_name, product_price){
6. const data = {
7. thumbnail,
8. quantity,
9. product_name,
10. product_price
11. };
12. localStorage.setItem('items', JSON.stringify(data));
13. this.items.push(JSON.parse(localStorage.getItem('items')));
14. this.isSubmitted = true;
15. }
16. deleteItem(i){
17. this.items.splice(i,1);
18. }
Have you tried this?
+1

Varun Setia6y ago

@Maureen It's as simple. Just the write the code after items = []; as shown below :)

items = [];
if(!typeof(localStorage.getItem('items'))=="undefined"){
items = localStorage.getItem('items');
}

Please let me know if this doesn't help.

Maureen Moore6y ago

Thanks, Varun Setia, how do I initialize the get items from localstorage if not null?

Rajeesh Menoth6y ago

Hi,

Just try it out the following answer.

items = [];
var product = {
thumbnail : "IPhone SE",
quantity: "2",
product_name: "iphone",
product_price: "45k"
};
localStorage.setItem('items', JSON.stringify(product));
this.items.push(JSON.parse(localStorage.getItem('items')));

Output:

Varun Setia6y ago

You need to get items from localstorage. Then add the new item to items array. Then push all items to localstorage. After the page refresh, initialise the get items from localstorage if not null.