浏览器刷新后如何保留localStorage存储的预算列表？

你的问题核心是页面初始化时没有执行列表渲染逻辑，虽然已经从localStorage读取了数据，但没有把数据渲染到页面上。另外还有一个小细节会导致渲染异常，以下是具体修复步骤：

1. 页面加载时触发渲染 #

在脚本的最末尾添加页面初始化渲染的调用，确保刷新页面后立即把localStorage里的数据渲染出来：

// 页面加载完成后自动渲染列表
window.addEventListener('load', renderList);
// 或者直接调用（如果脚本在body底部加载）
// renderList();

2. 修复renderList函数的字符串拼接问题 #

map方法返回的是数组，直接赋值给innerHTML会导致列表项之间出现逗号，需要用join('')把数组转为完整的HTML字符串：

function renderList(){
  el.list.innerHTML = budgetArray.map(function (data,i) {
    return `<div class="entry">
    <div class="list">
      <button onclick="deleteItem(event, ${i})" class="Archive" data-id="${data.id}">
            <img src="../resources/Images/archive.png" alt="Archive">
        </button>
        <button onclick="editItem(event, ${i})" class = "edit" data-id="${data.id}">
            <img src="../resources/Images/edit.png" alt="Edit">
        </button>

        <div class="input" data-id="${data.id}"></div>
        <label class="dateNew">${data.dateNew}</label>
        <label class="cashflowNew">${data.cashflowNew}</label>
        <label class="catagoryNew">${data.catagoryNew}</label>
        <label class="labelNew">${data.labelNew}</label>
        <label class="numberNew">${data.numberNew}</label>
    </div>
  </div>`;
  }).join(''); // 这里添加join('')

  el.label.value="";
  el.number.value="";
}

3. 确保BUDGETLIST_KEY已定义 #

检查代码中是否定义了BUDGETLIST_KEY常量，如果没有，需要在最顶部添加：

const BUDGETLIST_KEY = 'budget_list'; // 自定义一个唯一的key即可

修复后的完整逻辑说明 #

• 页面加载时，先从localStorage读取数据到budgetArray
• 立即调用renderList()把数组数据渲染为页面元素
• 后续新增/删除操作时，更新数组后调用storedEntry()保存到localStorage，再重新渲染列表

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