在不刷新页面的情况下显示更改的 localStorage？答案

【问题标题】：Show changed localStorage without refreshing page?在不刷新页面的情况下显示更改的 localStorage？
【发布时间】：2020-03-08 04:25:49
【问题描述】：

我正在做某事。但是每次取值时，我都要刷新页面才能显示新的值。

localStorage.setItem("money", money - 20);

如何在不实际刷新页面本身的情况下使页面上的“金钱”值刷新？可以用纯 JavaScript 完成吗？

【问题讨论】：

您能否编辑问题并添加有关该值如何在页面上显示的信息？

标签： javascript local-storage

【解决方案1】：

首先，在 localStorage 中存储资金是不可取的。用户可以使用开发人员工具轻松更改其价值。如果您使用该值进行缓存，请永远不要信任后端中的该值。

其次，每当您更改货币并将其存储到 localStorage 时，您都必须使用自定义函数更新值。像下面这样：

localStorage.setItem("money", money - 20);
document.getElementById("balance").innerText = localStorage.getItem("money") || 0;

在 SO 代码 sn-p 中不支持 localStorage，所以我将在此处发布完整的 html。您可以直接剪切和粘贴并尝试理解其逻辑。

例子：

<!DOCTYPE html>
<html>
<head>
   <title>Balance Example</title>
</head>
<body>
<div>Balance: $<span id="balance">0</span></div>
<button id="btnWithdraw" onClick="withdraw(20)">Withdraw 20$</button>
<button id="btnDeposit" onClick="deposit(100)">Deposit 100$</button>
</body>
<script>
   function getBalance() {
      let money = parseFloat(localStorage.getItem("money") || 0);
      return isNaN(money) ? 0 : money;
   }

   function setBalance(amount) {
      localStorage.setItem("money", parseFloat(amount));
   }

   function withdraw(amount) {
      let balance = getBalance();
      if(balance < amount) {
         return alert("Not enough balance!");
      } else {
         balance = balance - parseFloat(amount);
      }
      if (isNaN(balance)) balance = 0;
      setBalance(balance);
      renderBalance();
   }

   function deposit(amount) {
      amount = parseFloat(amount);
      if (isNaN(amount) || amount < 0) {
         return alert("Invalid amount!");
      }
      let balance = getBalance();
      balance += amount;
      setBalance(balance);
      renderBalance();
   }

   function renderBalance() {
      document.getElementById("balance").innerText = getBalance().toFixed(2);
   }

   window.onload = function() {
      renderBalance();
   }

</script>
</html>

【讨论】：

【解决方案2】：

更新 localStorage 后，使用 document.getElementById() 选择页面上显示货币变量值的元素，并使用 .innerHTML 更新其内容：

localStorage.setItem("money", money - 20);
document.getElementById("money").innerHTML = money - 20;

下面的 Pen 显示了如何实现这一点的工作示例。 Show changed variable without reloading page CodePen。

【讨论】：