使用localStorage removeItem后未出现预期null及类型错误的技术咨询

问题根源 #

你没看到预期的Cannot read properties of null错误，是因为初始化读取score时大概率用了默认值兜底（比如||运算符）。当执行localStorage.removeItem('score')后，localStorage.getItem('score')返回null，但被兜底逻辑替换成了默认的score对象，自然不会触发属性读取错误。

具体改进措施 #

1. 显式触发预期边界错误（用于测试场景） #

如果目标是验证重置后未初始化score的报错情况，直接去掉初始化时的默认值兜底：

// 初始化时直接读取，不做兜底处理
let score = JSON.parse(localStorage.getItem('score'));
// 此时重置后score为null，后续操作score的属性就会触发预期错误

2. 规范重置后的正常运行逻辑 #

如果希望重置后程序能正常工作，同时明确边界处理：

• 重置按钮点击时，同步更新内存中的score对象：

document.querySelector('.reset-btn').addEventListener('click', () => {
  localStorage.removeItem('score');
  // 同步重置内存中的分数数据
  score = { win: 0, lose: 0, tie: 0 };
  // 更新页面上的分数显示（需实现对应的updateScoreDisplay函数）
  updateScoreDisplay();
});

• 初始化时保留兜底逻辑，但做明确判断：

let score;
const storedScore = localStorage.getItem('score');
if (storedScore) {
  score = JSON.parse(storedScore);
} else {
  score = { win: 0, lose: 0, tie: 0 };
  // 首次运行时直接存入localStorage，避免后续重复判断
  localStorage.setItem('score', JSON.stringify(score));
}

3. 统一分数存储逻辑 #

不要仅在Rock分支调用setItem，所有玩家出招分支（石头/剪刀/布）都应更新并存储score，保证数据一致性：

function playerPlay(choice) {
  // 电脑出招逻辑
  const computerChoice = computerPlay();
  // 判断胜负逻辑
  const result = getResult(choice, computerChoice);
  
  // 更新分数
  if (result === 'win') score.win++;
  else if (result === 'lose') score.lose++;
  else score.tie++;
  
  // 统一存储更新后的分数
  localStorage.setItem('score', JSON.stringify(score));
  // 更新页面显示
  updateScoreDisplay();
}

4. 添加解析错误捕获 #

处理JSON.parse可能出现的格式错误（比如localStorage中的score数据损坏）：

let score;
try {
  const storedScore = localStorage.getItem('score');
  score = storedScore ? JSON.parse(storedScore) : { win: 0, lose: 0, tie: 0 };
} catch (err) {
  console.error('分数解析失败，重置为初始值:', err);
  score = { win: 0, lose: 0, tie: 0 };
  localStorage.setItem('score', JSON.stringify(score));
}

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