从localStorage获取收藏列表异常：电影ID与标题输出undefined求助

嘿，我一眼就看出问题出在哪了——你现在把电影的ID和Title当成独立的字符串塞进同一个数组里存在localStorage，后面渲染表格的时候，却试图从数组元素里读取.id和.title属性，但这些元素本身只是普通字符串，自然会返回undefined。咱们一步步来把这个问题搞定：

1. 先调整收藏数据的存储结构 #

别再把ID和Title分开存啦，改成每个收藏项都是一个包含id和title的对象，这样后续渲染时才能正确读取属性。

2. 更新点击收藏按钮的逻辑 #

修改添加/删除收藏的代码，适配对象数组的操作：

$('.heart').on("click", function() {
  const id = $(this).attr('data-id');
  const title = $(this).attr('data-title');
  const $icon = $(this).find("i");
  
  // 查找当前电影是否已经在收藏列表里
  const existingItemIndex = favorites.findIndex(item => item.id === id);
  
  if (existingItemIndex === -1) {
    // 没收藏过就添加新的对象
    favorites.push({ id, title });
  } else {
    // 已经收藏了就删掉对应项
    favorites.splice(existingItemIndex, 1);
  }
  
  toggleIcon($icon, id);
  // 把更新后的数组存回localStorage
  localStorage.setItem('favorites', JSON.stringify(favorites));
})

3. 修正初始化收藏图标的逻辑 #

原来的判断逻辑是检查数组里有没有id字符串，现在要改成检查对象数组里是否存在对应id的项，顺便更新toggleIcon函数适配新逻辑：

const toggleIcon = ($icon, id) => {
  const isFav = favorites.some(item => item.id === id);
  $icon
    .toggleClass("fa-heart-o", !isFav)
    .toggleClass("fa-heart", isFav);
};

// 初始化所有爱心图标的状态
$('.heart[data-id]').each(function() {
  const id = $(this).data("id");
  const $icon = $(this).find("i");
  toggleIcon($icon, id);
});

4. 修复表格渲染的代码 #

现在localStorage里存的是对象数组了，渲染时就能正确读取每个项的id和title：

$(document).ready(function () {
  // 先获取收藏数据，为空就设成空数组
  const favorites = JSON.parse(window.localStorage.getItem('favorites')) || [];
  let tr;
  for (let i = 0; i < favorites.length; i++) {
    tr = $('<tr/>');
    tr.append(`<td>${favorites[i].id}</td>`);
    tr.append(`<td>${favorites[i].title}</td>`);
    $('table').first().append(tr);
  }
});

完整修改后的代码 #

<div class="heart" data-id="ID1" data-title="test1"> <i class="fa fa-heart-o fa-2x"></i> </div>
<div class="heart" data-id="ID2" data-title="test2"> <i class="fa fa-heart-o fa-2x"></i> </div>
<div class="heart" data-id="ID3" data-title="test3"> <i class="fa fa-heart-o fa-2x"></i> </div>

<script>
// IE11 polyfill for Array.includes
if(!Array.prototype.includes){ 
  Array.prototype.includes = function(search){ 
    return !!~this.indexOf(search);
  }
} 

let favorites;

const toggleIcon = ($icon, id) => {
  const isFav = favorites.some(item => item.id === id);
  $icon
    .toggleClass("fa-heart-o", !isFav)
    .toggleClass("fa-heart", isFav);
};

$(function() {
  // 初始化收藏列表，为空则设为空数组
  favorites = JSON.parse(localStorage.getItem('favorites')) || [];
  
  $('.heart').on("click", function() {
    const id = $(this).attr('data-id');
    const title = $(this).attr('data-title');
    const $icon = $(this).find("i");
    
    const existingItemIndex = favorites.findIndex(item => item.id === id);
    
    if (existingItemIndex === -1) {
      favorites.push({ id, title });
    } else {
      favorites.splice(existingItemIndex, 1);
    }
    
    toggleIcon($icon, id);
    localStorage.setItem('favorites', JSON.stringify(favorites));
  })
  
  // 初始化所有爱心图标的状态
  $('.heart[data-id]').each(function() {
    const id = $(this).data("id");
    const $icon = $(this).find("i");
    toggleIcon($icon, id);
  });
});

// 控制台查看收藏数据
console.log(window.localStorage.getItem('favorites'));

$(document).ready(function () {
  const favorites = JSON.parse(window.localStorage.getItem('favorites')) || [];
  let tr;
  for (let i = 0; i < favorites.length; i++) {
    tr = $('<tr/>');
    tr.append(`<td>${favorites[i].id}</td>`);
    tr.append(`<td>${favorites[i].title}</td>`);
    $('table').first().append(tr);
  }
});
</script>

<table>
 <tr>
 <th>ID </th>
 <th>Title </th>
 </tr>
</table>

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