开发排行榜应用时表单值存入数组及localStorage异常求助

问题描述 #

开发小型排行榜应用时遇到两个问题：

• 表单值无法存入数组，执行push操作后数组仍为空，无法渲染内容；
• localStorage无法正常工作。

原代码 #

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

function saveScore() {
  const name = document.querySelector('.fullname').value;
  const score = 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');
    li.innerHTML = `${score.name} : ${score.score}`;
    scoreList.appendChild(li);
    localStorage.setItem('scores', JSON.stringify(scores));
  });
}

form.addEventListener('submit', (e) => {
  e.preventDefault();
  saveScore();
  renderScores();
  localStorage.setItem('scores', JSON.stringify(scores));
});

问题分析与修复方案 #

1. 数组无更新/渲染失败的核心原因 #

• 表单选择器匹配错误：检查.fullname和.thescore是否与HTML中输入框的class完全一致，若选择器错误，会获取到空值，导致push后数组无有效数据。
• 缺少输入验证：未对用户输入做校验，空名称或非数字分数存入后，视觉上无明显变化，误以为数组未更新。

2. localStorage冗余操作导致的异常 #

代码在saveScore、renderScores循环内、表单提交事件中重复执行localStorage.setItem，冗余操作可能引发存储时序问题，且完全没必要——只需在保存新分数时更新一次即可。

修复后的代码 #

const form = document.querySelector('.form');
// 初始化分数数组，兼容localStorage无数据的情况
const scores = JSON.parse(localStorage.getItem('scores')) || [];

function saveScore() {
  const nameInput = document.querySelector('.fullname');
  const scoreInput = document.querySelector('.thescore');
  
  // 去除输入首尾空格，避免空提交
  const name = nameInput.value.trim();
  // 转换为数字并校验有效性
  const score = parseInt(scoreInput.value.trim(), 10);
  
  // 验证不通过直接返回，不执行后续操作
  if (!name || isNaN(score)) return;
  
  const newScore = { name, score };
  scores.push(newScore);
  // 仅在保存新分数时更新localStorage
  localStorage.setItem('scores', JSON.stringify(scores));
  
  // 清空输入框，提升用户体验
  nameInput.value = '';
  scoreInput.value = '';
}

function renderScores() {
  const scoreList = document.querySelector('.result-list');
  scoreList.innerHTML = '';
  
  // 按分数降序排序，优化排行榜展示
  const sortedScores = [...scores].sort((a, b) => b.score - a.score);
  
  sortedScores.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();
});

// 页面加载完成后自动渲染已存储的分数
window.addEventListener('load', renderScores);

修复关键点 #

• 增加输入验证，过滤空值与无效分数；
• 移除重复的localStorage存储操作，仅在保存时更新；
• 页面加载时自动渲染存储的分数，解决刷新后无内容的问题；
• 新增分数排序逻辑，符合排行榜展示需求；
• 使用textContent替代innerHTML，避免潜在的XSS安全问题。

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