JavaScript问题：如何让localStorage存储所有表单提交记录而非仅最后一条？

你当前的问题核心是：每次调用localStorage.setItem("Transactie", ...)时，都会直接覆盖这个key对应的旧值——localStorage的key具有唯一性，相同key的写入操作会直接替换原有内容，所以最终只会保留最后一次提交的记录。

要存储所有历史输入内容，需要把交易记录以数组形式保存，每次提交时先读取已有的数组（无记录则初始化空数组），添加新记录后再存回localStorage。由于localStorage仅支持存储字符串，需要用JSON.stringify()和JSON.parse()处理数组的序列化与反序列化。

修改后的完整代码：

function submitTransaction() {
    const bedrag = document.getElementById("bedrag").value;
    const verzender = document.getElementById("verzender").value;
    const ontvanger = document.getElementById("ontvanger").value;
    
    // 读取现有交易记录，无记录则初始化空数组
    let transactions = JSON.parse(localStorage.getItem("Transactie")) || [];
    
    // 创建新交易记录（用对象存储更便于后续扩展，也可保留你原有的字符串格式）
    const newTransaction = {
        verzender: verzender,
        bedrag: bedrag,
        ontvanger: ontvanger,
        timestamp: new Date().toISOString() // 可选：添加时间戳，方便区分记录顺序
    };
    
    // 将新记录加入数组
    transactions.push(newTransaction);
    
    // 把更新后的数组序列化后存回localStorage
    localStorage.setItem("Transactie", JSON.stringify(transactions));
    
    // 可选：提交后直接打印所有记录
    console.log("所有交易记录：", transactions);
}

// 查看存储的记录时，要反序列化为数组
console.log("当前存储的交易记录：", JSON.parse(localStorage.getItem("Transactie")) || []);

关键说明： #

• JSON.parse(localStorage.getItem("Transactie")) || []：处理首次提交的情况，避免因localStorage中无数据返回null导致报错。
• 如果偏好保留你原来的字符串格式，只需把newTransaction改成模板字符串即可：const newTransaction = ${verzender} send ${bedrag} bits to ${ontvanger};
• 每次提交必须遵循「读旧数组→加新元素→存回localStorage」的流程，才能保证历史记录不被覆盖。

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