javascript 为什么我的值不保存到localStorage,其他人却保存了

eivnm1vs  于 2023-04-28  发布在  Java
关注(0)|答案(3)|浏览(116)

所以,我正在做一个点击器游戏,每当按下任何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;
}

我找不到任何错误。

kkbh8khc

kkbh8khc1#

您应该在重新加载后从本地存储中获取旧数据作为初始值。如果值为null或undefined,那么我可以使用任何默认值,如1。
在脚本的顶部,将第一行更改为:localStorage.inc = localStorage.inc || 1;

svmlkihl

svmlkihl2#

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

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;
8qgya5xd

8qgya5xd3#

我建议使用文档中提供的方法从localStorage设置和获取数据:setItem()getItem()。在您的情况下,它应该看起来像:const inc = localStorage.getItem('inc') || localStorage.setItem('inc', 1);

相关问题