页面重载时如何保存恢复交易记录？求修改纯前端单页代码

以下是修改后的完整代码，通过浏览器localStorage实现纯前端数据持久化，页面刷新后余额和交易记录不会丢失，无需任何后端开发：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>资金转账系统</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="profile" id="user1">
    <h2>用户1</h2>
    <p>余额: $<span class="balance">100</span></p>
    <input type="number" class="amount" placeholder="输入转账金额">
    <input type="text" class="receiver" placeholder="输入收款方用户名">
    <button onclick="sendAmount(1)">转账</button>
    <h3>交易记录</h3>
    <ul class="transactionRecords"></ul>
  </div>

  <div class="profile" id="user2">
    <h2>用户2</h2>
    <p>余额: $<span class="balance">150</span></p>
    <input type="number" class="amount" placeholder="输入转账金额">
    <input type="text" class="receiver" placeholder="输入收款方用户名">
    <button onclick="sendAmount(2)">转账</button>
    <h3>交易记录</h3>
    <ul class="transactionRecords"></ul>
  </div>

  <script>
      function sendAmount(sender) {
  let parentProfile = document.getElementById('user' + sender);
  let amount = parseFloat(parentProfile.getElementsByClassName('amount')[0].value);
  let receiver = parentProfile.getElementsByClassName('receiver')[0].value;
  let balanceElement = parentProfile.getElementsByClassName('balance')[0];
  let balance = parseFloat(balanceElement.textContent);

  if (receiver !== "user" + sender) {
    if (amount > 0 && amount <= balance) {
      if (receiver === "user1" || receiver === "user2") {
        balance -= amount;
        balanceElement.textContent = balance;

        let sentRecords = parentProfile.getElementsByClassName('transactionRecords')[0];
        let sentRecord = document.createElement('li');
        let currentDate = new Date().toLocaleString();
        sentRecord.textContent = `转出 $${amount} 至 ${receiver} - ${currentDate}`;
        sentRecords.appendChild(sentRecord);

        let receiverProfile = document.getElementById(receiver);
        let receiverBalanceElement = receiverProfile.getElementsByClassName('balance')[0];
        let receiverBalance = parseFloat(receiverBalanceElement.textContent);
        receiverBalance += amount;
        receiverBalanceElement.textContent = receiverBalance;

        let receivedRecords = receiverProfile.getElementsByClassName('transactionRecords')[0];
        let receivedRecord = document.createElement('li');
        receivedRecord.textContent = `从 用户${sender} 收到 $${amount} - ${currentDate}`;
        receivedRecords.appendChild(receivedRecord);
        saveData();
      } else {
        alert("无效的收款方用户名，请输入 'user1' 或 'user2'。");
      }
    } else {
      alert("金额无效或余额不足");
    }
  } else {
    alert("不能给自己转账。");
  }
}

function saveData() {
  const userData = [];
  for (let i = 1; i <= 2; i++) {
    const user = document.getElementById(`user${i}`);
    const balance = parseFloat(user.querySelector('.balance').textContent);
    const records = Array.from(user.querySelectorAll('.transactionRecords li')).map(item => item.textContent);
    userData.push({
      userId: `user${i}`,
      balance,
      transactionRecords: records
    });
  }
  localStorage.setItem('moneyTransferSystemData', JSON.stringify(userData));
}

function loadData() {
  const savedData = localStorage.getItem('moneyTransferSystemData');
  if (!savedData) return;
  const userData = JSON.parse(savedData);
  userData.forEach(data => {
    const user = document.getElementById(data.userId);
    user.querySelector('.balance').textContent = data.balance;
    const recordsList = user.querySelector('.transactionRecords');
    recordsList.innerHTML = '';
    data.transactionRecords.forEach(record => {
      const li = document.createElement('li');
      li.textContent = record;
      recordsList.appendChild(li);
    });
  });
}

window.onload = loadData;
  </script>
</body>
</html>

关键功能说明 #

• saveData()函数：每次转账完成后，收集两个用户的当前余额和所有交易记录，转换成JSON格式后存入浏览器的localStorage
• loadData()函数：页面加载时，从localStorage读取之前保存的数据，恢复用户余额和交易记录列表
• window.onload = loadData：确保页面完全加载后自动执行数据恢复操作

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