localStorage Shopping Cart

I am currently in phase 4 at flatiron School — JavaScript. Let me tell you, this is something that I struggled with through and through every week. JavaScript is not an easy language to learn, and if it comes naturally to you that's great but to completely understand JavaScript on a deeper level and “under the hood”… it was not an easy venture. I questioned everything that I learned in Ruby land and seconded guessed my confidence. But I made it — I am at the end of phase 4, writing to you about one thing I learned out of many things in JavaScript. If you are currently struggling, I highly recommend watching lots of YouTube videos. That was my saving grace when the words I was reading from the modules weren’t sticking.

My project idea for JavaScript was a small educational e-commerce site — Single page app, might I add. The idea was to have my products displayed on the page from my seeded data, add things to my cart, checking out feature of the cart that lets you submit an email, creating a new order and then being able to search by order number.

First things first, setting up your backend API — RUBY. This was something that was comfortable for me because it is something that we used in the past… rails. I think the hardest thing for me to wrap my head around with JavaScript will have to be how not structured it can be. There isn’t a set way to have the folders structured out — to many options. Pick a path and go for it.

Once I had my product seated and a container for my cart, I had to decide what route to take with a cart. I was introduced to localStorage.

LocalStorage is: “ The localStorage read-only property of the window interface allows you to access a Storage object for the Document's origin; the stored data is saved across browser sessions.”

The main methods that are key to setting up localStorage were:

localStorage.getItem();
localStorage.setItem();
localStorage.removeItem();

Inside the ( ), I would put in the parameters of [in my case]:

localStorage.setItem("cart", JSON.stringify(cart));

If you’ve never seen ‘JSON.stringify(x) — it just means this method “converts a JavaScript object or value to a JSON string, optionally replacing values if a replacer function is specified or optionally including only the specified properties if a replacer array is specified.”

That's all I needed to set up my cart. I became more comfortable with it once I played around in the terminal seeing what I could manipulate and store with JS. A piece of advice don't be timid to make errors, it's part of the learning process and if anything it helps build your confidence and your knowledge at the same time. This is just a little bit of information that I learned of localStorage during my JavaScript project.