如何判断LocalStorage两项均不为null，实现背景优先加载图片而非颜色

云上老周

2026-9-26

问题原因

原代码存在几处核心错误导致逻辑失效：

逻辑结构错误：「两项均不为null」的判断语句嵌套在了if (localStorage.getItem("Color") === null)的代码块内部，只有Color为null时才会执行这段判断，两项都不为null的场景永远触发不到对应逻辑
条件语法错误：判断语句中缺少逻辑与运算符&&，同时错误把null（空值类型）写成了字符串'null'，类型不匹配导致判断完全失效
逻辑覆盖不全：没有处理「Color不为空、img为空」的场景，也没有对应设置背景色的相关代码
样式冲突问题：如果先设置了backgroundColor，再设置backgroundImage时没有清空颜色，若图片加载失败/存在透明区域，会透出下方的背景色，看起来就像只渲染了颜色

修正方案

按照「自定义图片 > 自定义颜色 > 默认背景」的优先级重新梳理逻辑，代码如下：

// 预先取出存储值，避免重复调用getItem
const savedColor = localStorage.getItem('Color');
const savedImg = localStorage.getItem('img');

if (savedImg !== null) {
  // 优先加载存储的图片
  document.body.style.backgroundImage = savedImg;
  // 可选：清空背景色避免冲突，不需要可以删掉
  document.body.style.backgroundColor = 'transparent';
} else if (savedColor !== null) {
  // 没有图片时加载存储的颜色
  document.body.style.backgroundColor = savedColor;
  // 清空背景图避免残留
  document.body.style.backgroundImage = 'none';
} else {
  // 都没有时加载默认背景图
  document.body.style.backgroundImage = "url('css/Images/Instruments/pexels-pixabay-459797.jpg')";
  document.body.style.backgroundColor = 'transparent';
}