页面刷新时如何保留所有新增的NoteCard？

问题根源 #

核心问题是索引计算逻辑错误：页面加载后，DOM中渲染了历史卡片，但全局noteCards数组未同步更新。新增卡片时，noteIndex = noteCards.length +1会从1重新开始计数，直接覆盖localStorage中同索引的旧卡片数据，最终刷新后仅保留最后一次新增的卡片。此外，加载后的卡片未重新绑定toggleEditMode事件，编辑功能会失效。

解决方案 #

1. 同步全局数组：页面加载完成后，将渲染的历史卡片存入noteCards，确保新增时索引正确递增。
2. 统一存储结构：改用单键存储所有卡片的JSON数组，避免多键管理的混乱，提升读写效率。
3. 重新绑定事件：加载历史卡片后，为每个编辑图标重新绑定点击事件，保证功能正常。

修改后的核心代码 #

1. 全局初始化与页面加载逻辑

// 全局数组，存储所有卡片元素
let noteCards = [];

window.onload = function (){
  const articlesContainer = document.querySelector('.articles-container');
  // 从localStorage读取所有卡片数据
  const savedNotes = localStorage.getItem('all-notes');
  if (savedNotes) {
    const notes = JSON.parse(savedNotes);
    notes.forEach(note => {
      const tempDiv = document.createElement('div');
      tempDiv.innerHTML = note.html;
      const newNoteCard = tempDiv.firstElementChild;
      articlesContainer.appendChild(newNoteCard);
      noteCards.push(newNoteCard);
      // 重新绑定编辑事件
      const editIcon = newNoteCard.querySelector('.edit');
      editIcon.addEventListener('click', toggleEditMode);
    });
  }
}

2. 新增卡片函数

function addNewNoteCard(colorClass, backgroundColor) {
  const article = createNewNoteCard(backgroundColor);
  const articlesContainer = document.querySelector('.articles-container');
  articlesContainer.appendChild(article);
  
  // 收集当前卡片的核心数据
  const noteData = {
    html: article.outerHTML,
    content: article.querySelector('.text').textContent,
    date: article.querySelector('.date').textContent,
    backgroundColor: backgroundColor
  };
  
  // 更新全局数组与localStorage
  noteCards.push(article);
  const allNotes = JSON.parse(localStorage.getItem('all-notes')) || [];
  allNotes.push(noteData);
  localStorage.setItem('all-notes', JSON.stringify(allNotes));
  
  // 绑定编辑事件
  const editIcon = article.querySelector('.edit');
  editIcon.addEventListener('click', toggleEditMode);
}

3. 优化创建卡片函数（移除内部索引依赖）

function createNewNoteCard(backgroundColor){
  const article = document.createElement('article');
  article.classList.add('note-card', 'newCard');
  // 索引由外部根据全局数组长度设置，避免内部依赖
  article.setAttribute('data-note-index', noteCards.length + 1);
  
  const pTextClass = document.createElement('p');
  pTextClass.contentEditable = 'false'
  pTextClass.className = 'text';
  pTextClass.appendChild(document.createTextNode('It\'s a lovely day.'));
  article.appendChild(pTextClass);
  
  const edit = document.createElement('div');
  edit.className = 'edit';
  const iElement = document.createElement('i');
  iElement.classList.add('large', 'material-icons');
  iElement.textContent = 'edit';
  edit.appendChild(iElement);
  article.appendChild(edit);
  
  const date = document.createElement('div');
  date.className = 'date';
  date.appendChild(document.createTextNode(''));
  article.appendChild(date);
  
  article.style.backgroundColor = backgroundColor;
  return article;
}

关键说明 #

• 单键存储的方式避免了多键索引冲突，简化了数据维护流程。
• 全局数组与DOM元素同步，确保新增卡片的索引始终是正确的递增序列。
• 历史卡片重新绑定事件，保证编辑功能在页面刷新后正常可用。

内容的提问来源于stack exchange，提问作者Bob-Daawid Nwobodo