小型排行榜应用Local Storage功能异常求助

安全阿岳

2026-8-15

问题排查与修复方案

你的代码存在冗余操作和初始化缺失问题，导致Local Storage功能异常，具体问题和修复如下：

核心问题点

重复存储Local Storage：
- saveScore函数已完成scores数组更新与Local Storage存储，但表单提交事件里又重复调用localStorage.setItem，属于冗余操作。
- renderScores函数的循环内每次都执行localStorage.setItem，渲染列表无需修改存储内容，只会额外消耗性能。
页面初始化未渲染已有数据：页面加载时未调用renderScores，导致刷新页面后之前存储的分数无法显示。

修正后的代码

const form = document.querySelector('.form');
const scores = JSON.parse(localStorage.getItem('scores')) || [];

// 页面加载时先渲染已存储的分数
renderScores();

function saveScore() {
  const name = document.querySelector('.fullname').value;
  // 可选：将分数转为数字类型，避免存储字符串格式的分数
  const score = Number(document.querySelector('.thescore').value);
  const newScore = {
    name,
    score,
  };
  scores.push(newScore);
  localStorage.setItem('scores', JSON.stringify(scores));
}

function renderScores() {
  const scoreList = document.querySelector('.result-list');
  scoreList.innerHTML = '';
  scores.forEach((score) => {
    const li = document.createElement('li');
    // 用textContent替代innerHTML，避免潜在XSS风险
    li.textContent = `${score.name} : ${score.score}`;
    scoreList.appendChild(li);
  });
}

form.addEventListener('submit', (e) => {
  e.preventDefault();
  saveScore();
  renderScores();
});