Issue with JavaScript local storage in game

Question

I have been making a clicker game, and for some reason, when I added local storage to my game, it stopped working. The JavaScript doesn't appear to do anything at all anymore. This is the site

This is the code

let played = window.localStorage.played;
if (played === true) {
  let points = window.localStorage.getItem("points");
  let cpc = window.localStorage.getItem("cpc");
  let cps = window.localStorage.getItem("cps");
  let clicks = window.localStorage.getItem("clicks");
  let secondsplayed = window.localStorage.getItem("secondsplayed");
} else {
  window.localStorage.setItem("played", true);
  let points = 0;
  let cpc = 1;
  let cps = 0;
  let clicks = 0;
  let secondsplayed = 0;
}

function abbrNum(number) {
  const formatter = Intl.NumberFormat("en", { notation: "compact" });
  return formatter.format(number);
}

function update() {
  document.getElementById("score").innerText = abbrNum(points);
  document.getElementById("upgcpc").innerText = "Upgrade CPC: $" + cpc * 2;
  document.getElementById("upgcps").innerText = "Upgrade CPS: $" + (cps * 5 + 10);
  document.getElementById("cpcstat").innerText = "CPC: " + abbrNum(cpc);
  document.getElementById("cpsstat").innerText = "CPS: " + abbrNum(cps);
  document.getElementById("clicksstat").innerText = "Clicks: " + abbrNum(clicks);
  document.getElementById("secondsstat").innerText = "Seconds played: " + abbrNum(secondsplayed);

  window.localStorage.setItem("points", points);
  window.localStorage.setItem("cpc", cpc);
  window.localStorage.setItem("cps", cps);
  window.localStorage.setItem("clicks", clicks);
  window.localStorage.setItem("secondsplayed", secondsplayed);
}

function autoclick() {
  points = points + cps;
  secondsplayed++;
  update();
}

update();

setInterval(autoclick, 1000);

document.getElementById("button").onclick = () => {
  points = points + cpc;
  clicks++;
  update();
};

document.getElementById("upgcpc").onclick = () => {
  if (points >= cpc * 2) {
    points = points - cpc * 2;
    cpc = cpc + 1;
    update();
  }
};

document.getElementById("upgcps").onclick = () => {
  if (points >= cps * 5 + 10) {
    points = points - (cps * 5 + 10);
    cps = cps + 0.5;
    update();
  }
};

I have tried to figure out issues on my own, and I also used some JavaScript checkers I found online, but I couldn't get it fixed. I used code directly from W3Schools, so I'm not entirely sure why it doesn't work.

Answer 1

The original code structure was OK, it was just the visibility:

// Declare variables globally
let points = 0;
let cpc = 1;
let cps = 0;
let clicks = 0;
let secondsplayed = 0;

// Check for played status and retrieve values
let played = window.localStorage.getItem("played");
if( played === "true" )
{
    points = parseInt(window.localStorage.getItem("points"));
    cpc = parseInt(window.localStorage.getItem("cpc"));
    cps = parseFloat(window.localStorage.getItem("cps"));
    clicks = parseInt(window.localStorage.getItem("clicks"));
    secondsplayed = parseInt(window.localStorage.getItem("secondsplayed"));
} else {
    window.localStorage.setItem("played", "true");
}