So, I am making a clicker game and whenever any of the buy2inc() functions are pressed they work fine, and everything else saves when you reload. But, whenever you reload, everything saves except the clickInc
The clicks save.
Project: https://replit.com/@ChickenG1ttrDev/ClickR
Code:
localStorage.inc = 1;
localStorage.price = 100;
localStorage.price2 = 5000;
localStorage.price3 = 50000;
localStorage.price4 = 5000000;
localStorage.price5 = 5000000000;
localStorage.clickAmount = localStorage.clickAmount || 0;
var counter = document.getElementById("counter");
var incSpan = document.getElementById("inc");
var clicks = parseInt(localStorage.getItem("clickAmount"));
var clickInc = parseInt(localStorage.getItem("inc"));
var price = parseInt(localStorage.getItem("price")) || 100;
var price2 = parseInt(localStorage.getItem("price2")) || 5000;
var price3 = parseInt(localStorage.getItem("price3")) || 50000;
var price4 = parseInt(localStorage.getItem("price4")) || 5000000;
var price5 = parseInt(localStorage.getItem("price5")) || 5000000000;
var clicks = parseInt(localStorage.getItem("clickAmount")) || 0;
var buy1 = document.getElementById("buy1");
var buy2 = document.getElementById("buy2");
var buy3 = document.getElementById("buy3");
var buy4 = document.getElementById("buy4");
var buy5 = document.getElementById("buy5");
counter.textContent = clicks;
incSpan.textContent = clickInc;
buy1.textContent = price;
buy2.textContent = price2;
buy3.textContent = price3;
buy4.textContent = price4;
buy5.textContent = price5;
function reset() {
localStorage.clear();
location.reload();
}
function addCount() {
clicks = parseInt(clicks) + clickInc;
counter.textContent = clicks;
localStorage.clickAmount = clicks;
}
function buy2inc() {
if (clicks >= price) {
clicks -= price;
localStorage.clickAmount = clicks;
counter.textContent -= price;
price *= 2;
clickInc += 1;
localStorage.price = price;
localStorage.inc = clickInc;
incSpan.textContent = clickInc;
buy1.textContent = price;
} else {
alert("Not enough money");
}
}
function buy4inc() {
if (clicks >= price2) {
clicks -= price2;
localStorage.clickAmount = clicks;
counter.textContent = clicks;
price2 *= 2;
clickInc += 100;
localStorage.price2 = price2;
localStorage.inc = clickInc;
incSpan.textContent = clickInc;
buy2.textContent = price2;
} else {
alert("Not enough money");
}
}
function buy6inc() {
if (clicks >= price3) {
clicks -= price3;
localStorage.clickAmount = clicks;
counter.textContent -= price3;
price *= 2;
clickInc += 10000;
localStorage.price = price;
localStorage.inc = clickInc;
incSpan.textContent = clickInc;
buy3.textContent = price3;
} else {
alert("Not enough money");
}
}
function buy8inc() {
if (clicks >= price4) {
clicks -= price4;
localStorage.clickAmount = clicks;
counter.textContent -= price4;
price *= 2;
clickInc += 1000000;
localStorage.price = price;
localStorage.inc = clickInc;
incSpan.textContent = clickInc;
buy4.textContent = price4;
} else {
alert("Not enough money");
}
}
function buy9inc() {
if (clicks >= price5) {
clicks -= price5;
localStorage.clickAmount = clicks;
counter.textContent -= price5;
price *= 2;
clickInc += 1000000000;
localStorage.price = price;
localStorage.inc = clickInc;
incSpan.textContent = clickInc;
buy5.textContent = price5;
} else {
alert("Not enough money");
}
}
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200;900&family=Roboto+Mono:wght@100&display=swap');
body {
margin: 0;
background: whitesmoke;
text-align: center;
font-family: Montserrat;
}
#cont {
padding: 20px 40px 20px 20px;
background: whitesmoke;
box-shadow: 0 0 10px black;
width: fit-content;
border-radius: 10px;
margin: 30px;
font-family: Roboto Mono;
}
#cont #counter {
font-size: 64px;
}
#cont button {
padding: 10px 30px;
background: #6060e1;
border: none;
border-radius: 10px;
font-family: Montserrat;
font-weight: 900;
color: white;
cursor: pointer;
margin: 10px;
width: 100%;
}
#cont button:hover {
background: #4545a5;
transition: all .2s ease-in-out;
}
.border {
background: transparent !important;
border: 1px solid #6060e1 !important;
color: #6060e1 !important;
}
.price {
background: white;
padding: 5px;
font-weight: bold;
color: #6060e1;
border-radius: 7px;
}
#main {
background: linear-gradient(to bottom right, #ae8625, #f7ef8a) !important;
}
#main:hover {
opacity: 0.6;
}
```
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>ClickR</title>
</head>
<body>
<center>
<div id="cont">
<span id="counter">0</span><br>
<span id="inc">1</span>
<p> Per/Click</p><br>
<span id="time">0</span>
<p> Per/Second</p><br>
<button id="main" onclick="addCount()">Click Me!</button><br>
<button onclick="setIncrement(10)">hi</button>
<button onclick="buy2inc()">+1/Click <span class="price" id="buy1">100</span></button><br>
<button onclick="buy4inc()">+100/Click <span class="price" id="buy2">5000</span></button><br>
<button onclick="buy6inc()">+10000/Click <span class="price" id="buy3">50000</span></button><br>
<button onclick="buy8inc()">+1000000/Click <span class="price" id="buy4">5000000</span></button><br>
<button onclick="buy9inc()">+1000000000/Click <span class="price" id="buy5">5000000000</span></button><br>
<button class="border" onclick="reset()">Reset</button>
</div>
</center>
</body>
</html>
I couldn’t find any errors.
3
Answers
You should fetch old data from the local storage after reload as the initial value. If the value is null or undefined, then I can have any default value, like 1.
On the top of the script, change the first line to this:
localStorage.inc = localStorage.inc || 1;
because you on every first load overriding the old values at the beginning of your script, you can fix it like this:
I would suggest setting & getting data from
localStorage
by using method provided in documentation:setItem()
andgetItem()
. In your case it should look like:const inc = localStorage.getItem('inc') || localStorage.setItem('inc', 1);