Vanilla JS实现：在localStorage中存储图片切换状态

核心逻辑说明 #

• 首次加载无本地存储时，显示全部5张图片，文本默认黑色
• 点击任意图片后，隐藏其余4张仅显示当前目标图片，文本切换为对应图片的圆圈颜色
• 用单个localStorage键存储当前激活图片ID与文本颜色，页面重载时自动恢复状态

HTML 结构示例 #

<div class="image-container">
  <img src="img1.jpg" id="img1" onclick="switchToImage1()" alt="图片1">
  <img src="img2.jpg" id="img2" onclick="switchToImage2()" alt="图片2">
  <img src="img3.jpg" id="img3" onclick="switchToImage3()" alt="图片3">
  <img src="img4.jpg" id="img4" onclick="switchToImage4()" alt="图片4">
  <img src="img5.jpg" id="img5" onclick="switchToImage5()" alt="图片5">
</div>
<p id="status-text">默认显示文本</p>

基础样式（可选） #

.image-container img {
  display: inline-block;
  width: 120px;
  height: 120px;
  margin: 0 8px;
  cursor: pointer;
}
.hidden {
  display: none !important;
}

JavaScript 实现代码 #

// 单个localStorage存储键
const STATE_STORAGE_KEY = 'imageViewerState';
// 图片ID与对应文本颜色的映射表
const imageColorMap = {
  1: '#e74c3c', // 红色
  2: '#2ecc71', // 绿色
  3: '#3498db', // 蓝色
  4: '#f1c40f', // 黄色
  5: '#9b59b6'  // 紫色
};

// 页面初始化：读取本地存储恢复状态或设置初始状态
function initPageState() {
  const savedState = localStorage.getItem(STATE_STORAGE_KEY);
  if (savedState) {
    const { activeImgId, textColor } = JSON.parse(savedState);
    // 调用对应切换函数恢复显示状态
    window[`switchToImage${activeImgId}`]();
    // 恢复文本颜色
    document.getElementById('status-text').style.color = textColor;
  } else {
    // 初始状态：显示所有图片，文本黑色
    document.querySelectorAll('.image-container img').forEach(img => {
      img.classList.remove('hidden');
    });
    document.getElementById('status-text').style.color = '#000';
  }
}

// 保存当前状态到localStorage
function saveCurrentState(activeImgId) {
  const state = {
    activeImgId,
    textColor: imageColorMap[activeImgId]
  };
  localStorage.setItem(STATE_STORAGE_KEY, JSON.stringify(state));
}

// 独立切换函数（保留需求要求的5个函数）
function switchToImage1() {
  showTargetImage(1);
  updateTextColor(1);
  saveCurrentState(1);
}

function switchToImage2() {
  showTargetImage(2);
  updateTextColor(2);
  saveCurrentState(2);
}

function switchToImage3() {
  showTargetImage(3);
  updateTextColor(3);
  saveCurrentState(3);
}

function switchToImage4() {
  showTargetImage(4);
  updateTextColor(4);
  saveCurrentState(4);
}

function switchToImage5() {
  showTargetImage(5);
  updateTextColor(5);
  saveCurrentState(5);
}

// 辅助函数：仅显示目标图片，隐藏其余
function showTargetImage(targetId) {
  document.querySelectorAll('.image-container img').forEach(img => {
    img.classList.toggle('hidden', img.id !== `img${targetId}`);
  });
}

// 辅助函数：更新文本颜色
function updateTextColor(imgId) {
  document.getElementById('status-text').style.color = imageColorMap[imgId];
}

// 页面加载完成后初始化状态
window.addEventListener('load', initPageState);

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