I’m trying to create a shopping-car-function with a local storage which remembers the items in the shopping basket, but after reloading when i add or remove a item to the basket it start from 0 again.
let current = 0
let locstor = ''
function loadlocal() {
let locstor = ''
document.getElementById("basket").innerHTML = localStorage.getItem(locstor)
locstor = localStorage.getItem(locstor)
return locstor
}
function addItem() {
current = document.getElementById("productStat").innerHTML = current + 1
localStorage.setItem(locstor, current)
document.getElementById("basket").innerHTML = localStorage.getItem(locstor)
}
function removeItem() {
if (current < 1) current = 0;
else
current = document.getElementById("productStat").innerHTML = current - 1
localStorage.setItem(locstor, current)
document.getElementById("basket").innerHTML = localStorage.getItem(locstor)
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Productpagina</title>
<link href="buyingFunction.css" rel="stylesheet">
</head>
<body onload="loadlocal()">
<p>
<button onclick="removeItem()">-</button>
<span id="productStat"> 0 </span>
<button onclick=addItem()>+</button>
</p>
<div>
<button id="basket">0</button>
</div>
<script src="buyingFunction.js"></script>
</body>
</html>
I hope someone can explain me what i’m missing.
2
Answers
The problem is how you are using the
locstor
variable. You declared thelocstor
variable twice, once outside the global scope and once inside the loadlocal function. This resulted in the global variable not being updated within the function and consequently you were using an empty local variable, which was not related to local storage and then you and tried to store and retrieve the values using thelocstor
variable, but it was not associating this with a specific key in local storage.To solve this you can remove the locstor variable because it is not necessary for your case and store the cart item counter in local storage with the key ‘basketCount. By doing this, when you load the page, you now retrieve the counter value from local storage using localStorage.getItem(‘basketCount’) and update the current variable with that value like this:
de-wilde,
The localStorage object allows you to save key/value pairs in the browser which requires a Key name and the Value which we want to store for that key.
localStorage.setItem(key, value);
Example:
After analyzing your code, I got following things:
locstor
as a key but you haven’t defined a name of that key. eg. lastname, username etc…loadlocal()
method you are trying to set the key name with blank string likelet locstor = ''
loadlocal()
method you are again trying to set the key name with getdata the key value which is making key name as ‘null’locstor = localStorage.getItem(locstor)
So, Please review below code along with the comment to explaing the changes which needs to be implemented and let me know if you need further help in that.
As stackoverflow snippet will not allow to access localStorage so I am sharing the full code below. I hope this will helpful.
Thanks,
Jignesh Raval