点击器游戏clickInc无法保存到localStorage的问题求助

问题描述 #

开发点击器游戏时，所有buy2inc系列函数点击后功能正常，页面重载时点击数clicks等数据可正常保存，但clickInc数据每次重载都会重置，无法保留修改后的值。

相关代码 #

JavaScript代码 #

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");
  }
}

CSS代码 #

@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;
}

HTML代码 #

<!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>

问题原因 #

代码开头的localStorage.inc = 1;会在每次页面加载时强制覆盖localStorage中已保存的inc值，导致之前通过buy函数修改并保存的clickInc数据被重置为1。而其他变量（如price、clickAmount）的初始化逻辑是先读取localStorage，不存在才用默认值，不会覆盖已有数据。

修复方案 #

将初始化inc的代码从直接赋值改为条件赋值，确保只有当localStorage中没有inc值时才设置默认值：

修改前： #

localStorage.inc = 1;

修改后（推荐写法）： #

const savedInc = localStorage.getItem('inc');
if (!savedInc) {
  localStorage.setItem('inc', '1');
}

优化建议：统一初始化逻辑 #

可以将所有变量的初始化逻辑统一，避免重复代码并防止意外覆盖：

const defaultValues = {
  inc: '1',
  price: '100',
  price2: '5000',
  price3: '50000',
  price4: '5000000',
  price5: '5000000000',
  clickAmount: '0'
};

// 仅当localStorage中不存在对应值时，设置默认值
Object.entries(defaultValues).forEach(([key, value]) => {
  if (!localStorage.getItem(key)) {
    localStorage.setItem(key, value);
  }
});

内容的提问来源于stack exchange，提问作者ChickenG1ttr