实现按钮选中/取消选中及页面刷新后保留选中状态

你当前使用:focus伪类实现选中态存在缺陷：按钮失焦后样式会自动消失，无法稳定保持选中状态，也无法支持刷新后状态留存。可通过「独立选中类+localStorage持久化」的方案实现需求，具体修改如下：

1. 调整CSS样式 #

移除原有的button:focus规则，替换为独立的选中状态类，避免失焦导致样式丢失：

.book-item-btn.selected {
    background-color: black;
    color: white;
}

2. 补充状态持久化与交互逻辑 #

首先在页面初始化时从本地存储读取历史选中的图书ID，修改渲染函数给每个按钮绑定唯一标识、匹配初始选中状态，再通过事件委托实现点击切换选中、实时同步存储的逻辑：

// 初始化读取本地存储的已选图书ID集合
let selectedBookIds = JSON.parse(localStorage.getItem('selectedBookIds') || '[]');

function renderItemHtml(item) {
  // 匹配当前图书的选中状态
  const isSelected = selectedBookIds.includes(item.id);
  // 给按钮加标识类、数据id，选中状态下追加selected类
  return `<button class="book-item-btn ${isSelected ? 'selected' : ''}" data-book-id="${item.id}">
<div class="book"><img src="${item.volumeInfo.imageLinks.thumbnail}" class="thumbnails" 
alt="${item.singleTitle} by ${item.volumeInfo.authors[0]}" />
<div>
<h4>${item.volumeInfo.title}</h4>
<p><strong>${item.volumeInfo.authors}</strong></p>
<p>${item.volumeInfo.description.slice(0, 140)}</p> 
</div>
<br>
<p>Pages:  ${item.volumeInfo.pageCount}</p>
</div></button>`
}

// 事件委托绑定点击切换逻辑，动态渲染的元素也可生效
document.addEventListener('click', (e) => {
  const targetBtn = e.target.closest('.book-item-btn');
  if (!targetBtn) return;
  const currentBookId = targetBtn.dataset.bookId;

  // 切换选中状态
  if (selectedBookIds.includes(currentBookId)) {
    // 取消选中
    selectedBookIds = selectedBookIds.filter(id => id !== currentBookId);
    targetBtn.classList.remove('selected');
  } else {
    // 设为选中
    selectedBookIds.push(currentBookId);
    targetBtn.classList.add('selected');
  }

  // 同步更新到本地存储
  localStorage.setItem('selectedBookIds', JSON.stringify(selectedBookIds));
})

提示：HTML标准只定义了<h1>到<h6>六级标题标签，你代码中使用的<h8>是无效标签，建议替换为<p>等合法标签避免样式异常。

功能说明 #

• 点击图书按钮即可自由切换选中/取消选中状态，样式不会因为点击页面其他区域丢失
• 选中状态会持久化存储在浏览器本地，刷新页面后重新渲染列表时，会自动给之前选中的图书加上选中样式，状态不会丢失

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