个人中心
gpt4 book ai didi

javascript - 显示更改后的 localStorage 而不刷新页面？

转载 作者：行者123 更新时间：2023-11-28 03:06:23 25 4
gpt4 key购买 nike

我正在做某事。但每次我删除该值时，我都必须刷新页面才能显示新值。

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

如何在页面上刷新值“money”而不实际刷新页面本身？可以用纯 JavaScript 来完成吗？

最佳答案

首先，将钱存储在 localStorage 中是不可取的。用户可以使用开发者工具轻松更改其值。如果您使用该值进行缓存，切勿信任后端中的该值。

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

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

SO 代码片段不支持 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>

关于javascript - 显示更改后的 localStorage 而不刷新页面？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60581707/

25 4 0
文章推荐： javascript - Ionic AngularJS 所有 ng-click 事件都触发两次？
文章推荐： c++ - 使用函数返回的值初始化 C++ header 中的 const 值
文章推荐： javascript - 调整页面大小后转到特定 anchor (仅限高度变化)
文章推荐： c++ - log4cpp - log4cpp::AppenderSkeleton 不存在默认构造函数
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com