如何利用localStorage存储表单提交的表格数据，实现页面刷新后数据留存？

核心思路 #

不直接存储DOM元素，而是存储每条记录的原始数据（日期、文本、金额）——因为localStorage仅支持字符串存储。页面加载时读取存储的数据重新渲染表格行；添加新记录时，先把数据存入localStorage，再渲染DOM。

具体实现步骤 #

1. 封装渲染单条记录的函数 #

把你原有的创建表格行逻辑抽成可复用函数，新增记录和加载历史记录都能用：

// 渲染单条交易记录到表格
function renderTransactionRecord(table, record, currentSaldo) {
    const tr = document.createElement("tr");
    
    // 日期单元格
    const td = document.createElement("td");
    td.innerText = record.date;
    tr.appendChild(td);
    
    // 文本描述单元格
    const td2 = document.createElement("td");
    td2.innerText = record.text;
    tr.appendChild(td2);
    
    // 金额单元格
    const td3 = document.createElement("td");
    if (record.amount > 0) {
        td3.style.color = "rgb(4, 209, 4)";
        td3.innerText = "+";
    } else {
        td3.style.color = "red";
    }
    td3.innerText += record.amount;
    tr.appendChild(td3);
    
    // 余额单元格
    const td4 = document.createElement("td");
    td4.style.color = currentSaldo < 0 ? "red" : "black";
    td4.innerText = currentSaldo.toFixed(2);
    tr.appendChild(td4);
    
    table.appendChild(tr);
}

2. 处理localStorage的读写逻辑 #

新增两个工具函数，负责读取已有记录和保存新记录：

// 从localStorage读取交易记录
function getStoredTransactions() {
    const stored = localStorage.getItem("transactionRecords");
    return stored ? JSON.parse(stored) : [];
}

// 保存交易记录到localStorage
function saveTransactionRecord(record) {
    const transactions = getStoredTransactions();
    transactions.push(record);
    localStorage.setItem("transactionRecords", JSON.stringify(transactions));
}

3. 修改表单提交与页面加载逻辑 #

调整原有代码，整合存储与渲染逻辑：

const table = document.getElementById("your-table-id"); // 替换成你的表格ID
let saldo = 0; // 初始化余额，加载历史记录时重新计算

// 页面加载时自动渲染历史记录
window.addEventListener("DOMContentLoaded", () => {
    const transactions = getStoredTransactions();
    // 遍历历史记录，重新计算余额并渲染
    transactions.forEach(record => {
        saldo += record.amount;
        renderTransactionRecord(table, record, saldo);
    });
});

// 表单提交时的逻辑（替换你原有的提交代码）
yourForm.addEventListener("submit", (e) => {
    e.preventDefault();
    
    // 这里替换成你获取用户输入的实际代码
    const text = document.getElementById("input-text").value;
    const amount = parseFloat(document.getElementById("input-amount").value);
    
    // 生成和原代码一致的日期格式
    const date = new Date().toLocaleDateString("de-Ch");
    
    // 更新余额
    saldo += amount;
    
    // 组装记录对象
    const newRecord = { date, text, amount };
    
    // 保存到localStorage
    saveTransactionRecord(newRecord);
    
    // 渲染新行到表格
    renderTransactionRecord(table, newRecord, saldo);
    
    // 清空表单（可选操作）
    yourForm.reset();
});

关键说明 #

• 只存储核心数据，避免localStorage冗余，同时方便后续修改或扩展功能。
• 页面加载时重新计算余额，确保余额和记录的一致性（如果直接存储余额，可能因数据修改出现偏差）。
• 所有操作基于transactionRecords这个localStorage键，保证数据的唯一性。

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