Local Storage数据持久化问题：页面重载后数据丢失怎么解决？

为什么我的数据在页面重载后无法持久化？我怀疑问题出在display函数的参数fname和lname上，但不确定还需要修改哪些地方。

原代码如下：

var fnInput = document.querySelector("#fName");
var lnInput = document.querySelector("#lName");
var btn = document.querySelector("#submit-btn");
var infoArea = document.querySelector("#names")
var info = [];

btn.addEventListener("click", function(e){
    e.preventDefault();
    
    info.push({fName: fnInput.value, lName: lnInput.value});

    // console.log(info)

    for(var i = 0; i < info.length; i++){
        localStorage.setItem(i, JSON.stringify(info[i]))
    }
        display(fnInput.value, lnInput.value)

        fnInput.value = '';
        lnInput.value = '';
})

function getItems(){
    for(var i = 0; i < localStorage.length; i++) {
        if(localStorage.length > 0){
            var index = localStorage.key(i);
            var value = JSON.parse(localStorage.getItem(index));
    
            info.push(value);
            //what to use as arguments for display and why?
            display(value.fname, value.lname)
        }
        console.log(value)
    }
}

function display(fname, lname) {
    var infobox = document.createElement('div');

    var displayFName = document.createElement('h3');
    displayFName.textContent = fname;
    infobox.appendChild(displayFName);

    var displayLName = document.createElement('h3');
    displayLName.textContent = lname;
    infobox.appendChild(displayLName)

    infoArea.appendChild(infobox)
    
}

getItems();

问题分析及修复方案 #

1. 核心问题：属性名大小写不匹配 #

你存储数据时用的是fName和lName（首字母大写），但在getItems函数里调用display时，写的是value.fname和value.lname（全小写）——JavaScript对象属性名区分大小写，这直接导致获取不到对应的值，页面重载后自然显示不出数据。

2. 次要问题：存储逻辑冗余且有风险 #

每次点击提交都循环遍历整个info数组重新存储所有项，不仅效率低，还可能因为索引问题导致数据覆盖。另外getItems里的localStorage.length > 0判断放在循环内完全多余，而且循环外的console.log(value)会在localStorage为空时报错。

修复后的完整代码 #

var fnInput = document.querySelector("#fName");
var lnInput = document.querySelector("#lName");
var btn = document.querySelector("#submit-btn");
var infoArea = document.querySelector("#names")
var info = [];

// 页面加载时读取本地存储
function getItems(){
    // 直接遍历localStorage的键
    for(var i = 0; i < localStorage.length; i++) {
        var index = localStorage.key(i);
        var value = JSON.parse(localStorage.getItem(index));
        if(value) { // 确保值有效再处理
            info.push(value);
            display(value.fName, value.lName); // 修正属性名大小写
        }
    }
}

// 显示数据的函数
function display(fname, lname) {
    var infobox = document.createElement('div');

    var displayFName = document.createElement('h3');
    displayFName.textContent = fname;
    infobox.appendChild(displayFName);

    var displayLName = document.createElement('h3');
    displayLName.textContent = lname;
    infobox.appendChild(displayLName)

    infoArea.appendChild(infobox)
}

// 提交按钮事件
btn.addEventListener("click", function(e){
    e.preventDefault();
    const newItem = {fName: fnInput.value, lName: lnInput.value};
    info.push(newItem);
    // 只存储新增的项，避免重复存储所有数据
    localStorage.setItem(info.length - 1, JSON.stringify(newItem));
    display(fnInput.value, lnInput.value);

    fnInput.value = '';
    lnInput.value = '';
})

// 初始化读取数据
getItems();

更优化的存储方式（可选） #

如果数据量不大，建议直接把整个info数组转成JSON字符串存储为一个键值对，这样管理更简单：

// 提交时
localStorage.setItem('userNames', JSON.stringify(info));

// 读取时
const savedInfo = localStorage.getItem('userNames');
if(savedInfo) {
    info = JSON.parse(savedInfo);
    info.forEach(item => display(item.fName, item.lName));
}

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