Implementing localstorage

Question

Currently working on an e-commerce website, which is my first major project. I am, for the first time, implementing localstorage for the basket date (qty, items etc).

What I am trying to achieve is whenever the user clicks on the 'add to basket' button, the number beside the basket increases and displays. This is pretty straightforward but with localstorage I am obviously doing something wrong. I assume I am retrieving it incorrectly?

Please can you explain to me what I am doing wrong here as I want to get my head wrapped around how to use local storage in this scenario correctly. I thinkk that will help me understand how to implement it correctly when it comes to parseing the JSON product details correctly too.

Please have a look at the code below.

let basketData = {
    basketQty: 0,
    products: []
}

//LOCAL STORAGE
localStorage.setItem("basketData", JSON.stringify(basketData));
let localData = JSON.parse(localStorage.getItem("basketData")); 

//INCREASE BASKET QTY INNER HTML
addToBasket.click(function(){
    basketData.basketQty++;
    if (basketData.basketQty > 0){
    $(basketQty).html(localData.basketQty);
}
})



<nav>

        <div class="logo">
            <img src="images/logo.png" alt="Prime Health Logo" />
        </div>

        <div class="nav-links">
            <ul>
                <li>VITAMIN & SUPPLEMENTS</li>
                <li>SPORTS & WORKOUT NUTRITION</li>
                <li>WEIGHT MANAGEMENT</li>
                <li>FREE FROM</li>
            </ul>
        </div>

        <div id="basket">
            <span id="item-count"></span>
            <i class="fas fa-shopping-basket"></i>
        </div>

    </nav>

Many thanks for taking the time out to help and respond!

err you set the storage data as an empty basket, then set the local data to be that empty basket straight away and at no point do you update or change those variables so you will always have an empty basket — Pete
– Pete, Commented Jun 19, 2018 at 10:47

Parithiban · Accepted Answer · 2018-06-19 11:30:50Z

1

You are just setting it to a variable and not updating it in local storage. Also in addToBasket function you need to check the quantity from the local storage and increment it and then set the new quantity to the local storage.

localStorage.setItem("basketData", JSON.stringify({
    basketQty: 1,
    products: []
}));

You can refer this example. I have created a raw workaround for this you would have an better idea of it

https://jsfiddle.net/3tdn2jrv/

edited Jun 19, 2018 at 11:30

answered Jun 19, 2018 at 10:51

Parithiban

1,66611 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

jimmy118 Over a year ago

Hi Parithiban, thank you so much for the answer. It is now displaying the qty correctly. Just a quick follow up question. When I refresh the page, the number is no longer there anymore. Isnt the point of localstorage to keep a hold of the data? As mentioned this is completely new to me and my first ever major project as a self-taught developer so I am still learning as I go alongm, so I know the question may sound silly, but I just need to learn more about this particular aspect. Thanks for the answer once again.

Parithiban Over a year ago

Because you are creating a new variable each time and assigning it let basketData. You need to check wether the localstorage.basketData is available if not only you need to set localStorage.setItem("basketData", JSON.stringify(basketData));

Parithiban Over a year ago

@jimmy118 I have created a fiddle for it have a look over it

jimmy118 Over a year ago

I am very thankful for your time in provding me with that fiddle which I will have a look at, study and try to understand...I can already see that it is helping me understand the whole localstorage better!! Many thanks once again buddy

Collectives™ on Stack Overflow

Implementing localstorage

1 Answer 1

4 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Linked

Related