Hello, I’m new here and I’m going to introduce myself separately. Now to the matter at hand:
I would like to store the items of my webshop, which I created with React and an online tutorial, in the local storage of the browser. I’ve heard that this is a possible way to not lose everything on refresh.
But my question is how this can be done. I’m not good and or experienced enough to implement this feature myself.
I would be grateful for every hint and help.
use localStorage.setItem(myItmes, 'xyz') to store and localStorage.getItem(myItmes) to get them back, note that you need to parse your results using JSON.parse() if you have javascript objects stored in your local storage when you retrieve them, and when you store javascript objects use JSON.stringify()
Thank you for the answer. So, in my project, where exactly would I implement this? I have a context.js with the core logic of my project. But still I am unsure where exactly (which function) to do this and how it is done in my specific case. This is the context.js:
Depends, I don’t know the details of your project but typically I like to store on setState() callbacks, for instance, when you add to your cart you could, …
I think some linters complain when you set state on CDM, so you could move it to it’s own function, anyhow , you’d do something like the above but of course there are many ways to skin the cat, the above is just one way, like I said above it depends on how your overall app functions
Where are you calling saveCart() ? , try calling it before or after addTotals() after the state is set like I did above then in chrome in your console go to Application > Local Storage > and see it your cart is saved. if there is no cart then you are not saving it properly, start from there…, remove the logic from componentDidMount() for now.
from componentDidMount() and added localStorage.setItem to addToCart() again and I get no errors so far. Also, myCart is indeed saved to the local storage.
ok, so the problem is that on CDM, if your cart in your local storage is undefined , say a user is using your app for the first time for instance, then there would be nothing to set the state with therefore you could try a conditional like so
yeah, it works now because you already saved that item in your storage and it’s not empty, but if you apply the above code and clear your storage it should still work, however it won’t work if you clear your storage but don’t include the above snippet
Namely, when I refresh the page, the prices are set back to zero. They also don’t appear in the local storage.
What I tried is to do localStorage.setItem('myCart', JSON.stringify(this.state.cart, this.state.cartSubtotal...))
among other things. Could you help me figure this one out, too?
JSON.stringify() takes only 1 required argument and 2 optional ones, it thinks that your this.state.cartSubtotal is the first optional argument when it isn’t, either a) separately save your storage items or b) unify the object you want to store into one before saving it.
probably because this.state.cart is an array, you have a general direction on how to handle the problem, google around and see how to properly unify the objects, stringify them and then store the unified object, if you still have problems, post what you have tried here…
With this code I get a subtotal in the local storage but when I refresh the products are gone.
I guess the mistake is somewhere in the componentDidMount?
Well, think this thru again, in your original idea you wanted to save the cart contents in the local storage. So, once stored correctly, in your componentDidMount() you set the state of cart with the what was stored in the browser and it worked, now you want to also store the carTotal as well, assuming that you have correctly stored one unified object consisting of the carTotal and cart in the browser’s local storage, what state properties would you want to retrieve from the local storage and update your component with?
May I recommend not using localstorage for your shopping cart. By default, apple tablet does not allow you to use localstorage unless you turn it on. That would mean you’d be missing out on all customers who use apple tablets.
I’m not sure if Apple updated this,. but this was the case 7-8 months ago.