Question 80267 in Html Question posted in
Some basic documentation can be found here.

Why won't my value save to localStorage, others do though – Html

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.

Tags:

3

Answers


  1. 0

    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;

    Login or Signup to reply.
  2. 0

    because you on every first load overriding the old values at the beginning of your script, you can fix it like this:

    localStorage.inc = localStorage.inc || 1;
localStorage.price = localStorage.price|| 100;
localStorage.price2 = localStorage.price2 || 5000;
localStorage.price3 = localStorage.price3 || 50000;
localStorage.price4 = localStorage.price4 || 5000000;
localStorage.price5 = localStorage.price5 ||5000000000;
localStorage.clickAmount = localStorage.clickAmount || 0;
    Login or Signup to reply.
  3. 0

    I would suggest setting & getting data from localStorage by using method provided in documentation:
    setItem() and getItem(). In your case it should look like:
    const inc = localStorage.getItem('inc') || localStorage.setItem('inc', 1);

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search