为什么我的值不能保存到 localStorage，而其他人可以保存

Question

所以，我正在制作一个唱首歌游戏，只要按下任何 buy2inc() 函数，它们就可以正常工作，其他一切都会在您重新加载时保存。但是，每当您重新加载时，除了 clickInc

之外的所有内容都会保存

点击保存。

项目：https://replit.com/@ChickenG1ttrDev/ClickR

代码：

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()">[phone]/Click <span class="price" id="buy5">5000000000</span></button><br>
      <button class="border" onclick="reset()">Reset</button>
    </div>
  </center>
</body>

</html>

我找不到任何错误。

Answer 1

reload后应该从本地存储中取出旧数据作为初始值。如果该值为 null 或未定义，那么我可以使用任何默认值，例如 1。

在脚本的顶部，将第一行更改为：

localStorage.inc = localStorage.inc || 1;

Answer 2

因为您在每次第一次加载时都会在脚本开头覆盖旧值，所以您可以这样修复它：

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;

Answer 3

我建议使用文档中提供的方法从

localStorage

设置和获取数据：

setItem()

和

getItem()

。在你的情况下，它应该是这样的：

const inc = localStorage.getItem('inc') || localStorage.setItem('inc', 1);