Items not being saved to localStorage

Question

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)" > X button > 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 >

Maureen Moore · Answer

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

Varun Setia · Answer

Just use this.items.push(JSON.parse(localStorage.getItem('items'))) instead of items=localStorage.getItem('items')

Varun Setia · Answer

JSON.parse() should have been called before assignment. I missed that !! Please try!

Maureen Moore · Answer

I also get the error Type 'string' is not assignable to type 'any[]' for this line of code: this .items = localStorage.getItem( 'items' );

Varun Setia · Answer

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?

Maureen Moore · Answer

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()

Maureen Moore · Answer

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" )

Varun Setia · Answer

@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.

Rajeesh Menoth · Answer

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 Setia · Answer

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.

Varun Setia · Answer

Hi Maureen, is it resolved?

Varun Setia · Answer

items = []; if (! typeof (localStorage.getItem( 'items' ))== "undefined" ){ items = localStorage.getItem( '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); } Have you tried this?