JQuery .attr：页面刷新后通过Cookie记住Logo切换状态

嘿，这个需求太常见啦！咱们只需要利用浏览器的localStorage就能搞定——它能帮咱们在本地持久存储简单的状态数据，哪怕页面刷新甚至关闭浏览器再打开，数据都不会丢。

核心思路 #

1. 页面加载时恢复状态：读取localStorage里保存的Logo状态，设置对应的图片（或样式）
2. 切换时保存状态：每次点击按钮切换Logo时，同步更新localStorage里的状态记录

修改后的代码示例 #

假设你的原有HTML和JS是这样的（如果和你的实际代码有差异，调整对应部分就行）：

HTML部分

<img id="siteLogo" src="/path/to/original-logo.png" alt="网站Logo">
<button id="toggleLogoBtn">切换Logo大小</button>

JavaScript部分（已添加状态持久化逻辑）

const logo = document.getElementById('siteLogo');
const toggleBtn = document.getElementById('toggleLogoBtn');
// 定义存储用的键名，尽量语义化，避免冲突
const LOGO_STATE_KEY = 'currentLogoSize';

// 页面加载完成后，恢复之前保存的状态
window.addEventListener('load', () => {
  const savedState = localStorage.getItem(LOGO_STATE_KEY);
  if (savedState === 'small') {
    logo.src = '/path/to/small-logo.png';
  }
  // 如果没有保存的状态，默认显示原版，不用额外处理
});

// 按钮点击事件：切换Logo + 保存状态
toggleBtn.addEventListener('click', () => {
  let newState;
  if (logo.src.includes('original-logo')) {
    logo.src = '/path/to/small-logo.png';
    newState = 'small';
  } else {
    logo.src = '/path/to/original-logo.png';
    newState = 'original';
  }
  // 把当前状态存入localStorage
  localStorage.setItem(LOGO_STATE_KEY, newState);
});

额外说明 #

• 如果你的Logo是通过CSS类控制大小（比如给图片加.small类缩小），逻辑完全一样：只需要把切换src的代码换成添加/移除类，存储的状态改成类的标识就行。
• localStorage只能存字符串，如果需要存储更复杂的状态（比如多个配置），可以用JSON.stringify()把对象转成字符串存储，读取时用JSON.parse()转回来。
• 少数场景下（比如隐私模式）localStorage可能不可用，要是想更稳妥，可以加个try-catch包裹存储操作，避免报错影响功能：

  try {
    localStorage.setItem(LOGO_STATE_KEY, newState);
  } catch (e) {
    console.warn('无法保存状态：', e);
  }
  

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