Получить список избранного из localStorage / undefined

Question

Список mov ie имеет любимую иконку (сердечко) через fontawesome. Мне нужны Mov ie -ID и Mov ie -title. Вывод таблицы (обычно на отдельной странице) всегда не определен для идентификатора и заголовка.

Я попытался добавить use JSON .parse и JSON .stringify.

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

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

let favorites;
const toggleIcon = ($icon, id) => {
  const isFav = favorites.includes(id);
  $icon
    .toggleClass("fa-heart-o", !isFav)
    .toggleClass("fa-heart", isFav); // swap classes
};
$(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");
    
    if (!favorites.includes(id)) favorites.push(id); // save the movie
    else {
      const index = favorites.indexOf(id); // get the movie position
      favorites.splice(index, 1); // and delete it from favourites
    }
    
    if (!favorites.includes(title)) favorites.push(title); // save the movie
    else {
      const index2 = favorites.indexOf(title); // get the movie position
      favorites.splice(index2, 1); // and delete it from favourites
    }
    
    toggleIcon($icon, id);
    // store array in local storage
    localStorage.setItem('favorites', JSON.stringify(favorites));
  })

  $('.heart[data-id]').each(function() { // set the classes on ALL hearts
    const id = $(this).data("id");
    const $icon = $(this).find("i");
    toggleIcon($icon, id);
  });
});

console.log(window.localStorage.getItem('favorites'));

$(document).ready(function () {
    
  var json = JSON.parse(window.localStorage.getItem('favorites'));
  
  console.log(json);
        
   var tr;
  for (var i = 0; i < json.length; i++) {
    tr = $('<tr/>');
    tr.append("<td>" + json[i].id + "</td>");
    tr.append("<td>" + json[i].title + "</td>");
    $('table').first().append(tr);
  }  
});
</script>
<table>       
  <tr>             
    <th>ID     
    </th>             
    <th>Title     
    </th>       
  </tr>
</table>

Вот скрипка.

https://jsfiddle.net/5jskxg2n/

Большое спасибо за помощь.