使用Local Storage存储测验分数出现无值初始分数问题求助

问题根源 #

第一次完成测验时，localStorage里还没有latestScore这个键，localStorage.getItem("latestScore")返回null，代码里用|| ""把lastScore设成了空字符串。对空字符串调用split(',')会得到一个只包含空字符串的数组[""]，之后把当前分数scorepush进去，数组就变成["", 实际分数]。遍历数组时，索引0对应的元素是空字符串，就出现了Score 0: 的空条目。

两种解决办法 #

方法一：过滤空元素

修改获取分数数组的代码，直接处理空值情况，过滤掉空字符串：

// 替换原来的scoreDetail初始化代码
const lastScore = localStorage.getItem("latestScore") || "";
const scoreDetail = lastScore.split(',').filter(item => item.trim() !== '');

第一次运行时，lastScore是空字符串，split后得到的数组过滤后变成空数组，push当前分数后数组只有实际分数，遍历就不会出现空条目。

方法二：用JSON规范存储数组（更推荐）

用JSON格式存储数组比逗号分隔字符串更可靠，还能避免分数包含逗号的极端情况：

document.querySelector(".check").onclick = function () {
    /* Hide unneeded sections and showing scores */
    quiz.classList.add("hidden");
    correctAnswer.classList.remove("hidden");

    /*Showing all previous scores */
    const lastScore = localStorage.getItem("latestScore") || "[]";
    const scoreDetail = JSON.parse(lastScore);

    scoreDetail.push(score);
    localStorage.setItem("latestScore", JSON.stringify(scoreDetail));

    let userScoreTemplate = `<h2>This Round's Score: ${score}</h2>`;

    // 把index+1，让分数编号从1开始，更符合用户直觉
    scoreDetail.map((items, index) => {
        userScoreTemplate += `<h3>Score ${index + 1}: ${items}</h3>`;
    });

    let userScoreBoard = document.querySelector(".user-score");
    userScoreBoard.innerHTML = userScoreTemplate;
};

第一次运行时scoreDetail是空数组，push分数后只有一个元素，遍历出来的就是Score 1: 实际分数，完全解决空条目问题。

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