Локальное хранилище добавляет нулевой объект в мой массив

Question

Я создал функцию добавления в избранное, используя локальное хранилище. Когда я добавляю товары со страницы товара, они добавляются, сохраняются и отображаются правильно, когда я первоначально перехожу на свою страницу избранного Однако, если я перемещаюсь назад и вперед в браузере или непосредственно набираю URL страницы избранного, я получаю эту ошибку:

Uncaught TypeError: Невозможно прочитать свойство 'id' из null

Строка с ошибкой: id = item.id;

При вложении ошибки я заметил, что нулевой объект теперь добавлен в мой массив. Я не уверен, почему этот нулевой объект добавляется.

Вот код для отдельной страницы продукта, куда я добавляю его:

var debug = true; // Set to true to output message to the error console
$(document).ready(function() {
  var favs = favInit();
  var item = {
    id:   '{{ dynamic_page_hubdb_row.hs_id }}',
    name: '{{ dynamic_page_hubdb_row.hs_name }}',
    url:  '{{ dynamic_page_hubdb_row.image.url }}',
    path: '{{ request.path }}'
  }
  var isFav = isFavorite(item,favs);
  if (isFav){
    setAsFavorite();
    $('#addFavorite').hide();
    $('#addFavoriteStar').hide();
    $('#removeFavorite').show();
    $('#removeFavoriteStar').show();
  } else {
    removeAsFavorite(item);
    $('#addFavorite').show();
    $('#addFavoriteStar').show();
    $('#removeFavorite').hide();
    $('#removeFavoriteStar').hide();
  }
  $('#addFavorite, #addFavoriteStar').click(function(e){
    e.preventDefault();
    if (debug) { console.log('adding item as a favorite'); }

    // Update localStorage
    setAsFavorite(item);

    // Update class
    $('#itm{{ dynamic_page_hubdb_row.hs_id }}').addClass('isFavorite');
      $('#addFavorite').hide();
    $('#addFavoriteStar').hide();
    $('#removeFavorite').show();
    $('#removeFavoriteStar').show();

    // Trigger modal
    $('#myModal').modal('show');

    return false;
  });
  $('#removeFavorite, #removeFavoriteStar').click(function(e){
    e.preventDefault();
    if (debug) { console.log('removing item from favorites'); }

    // Update localStorage
    removeAsFavorite(item);

    // Update class
    $('#itm{{ dynamic_page_hubdb_row.hs_id }}').removeClass('isFavorite');
    $('#addFavorite').show();
    $('#addFavoriteStar').show();
    $('#removeFavorite').hide();
    $('#removeFavoriteStar').hide();

    return false;
  });
});

function favInit(){
  // Get the existing favorites from localStorage
  var favs = JSON.parse(localStorage.getItem('favorites'));
  if (debug) { console.log('favInit-1 favorites: '+localStorage.getItem('favorites')); }
  // If localStorage.favorites doesn't exists, create an empty array
  if (favs != null && Array.isArray(favs) && favs.length){ } else {
    if (debug) { console.log('no favorites found in local storage. Creating an empty array'); }
    favs = new Array; // setup an empty array
    // Refresh local storage
    localStorage.setItem("favorites", JSON.stringify(favs));
    // pull favs from local storage
    favs = JSON.parse(localStorage.getItem('favorites'));
  }

  if (debug) { console.log('favInit-2 favorites: '); console.dir(favs); }

  return favs;
}

function isFavorite(item,favs){
  if (favs != null && favs.length){
    // Find the selected item in the favs array
    var test = favs.find(x => x.id === item.id);
    //var test = $.grep(favs, function(e){ return e.id == item.id; });
    if (test != null){
      if (debug) { console.log('item is already a favorite: '); console.dir(item); }
      return true;
    } else {
      if (debug) { console.log('item is not a favorite.'); }
      return false;
    }
  }
}

function setAsFavorite(item){
  var favs = JSON.parse(localStorage.getItem('favorites'));
  favs.push(item);
  localStorage.setItem('favorites',JSON.stringify(favs));
  if (debug) { console.log('favInit-1 favorites: '+localStorage.getItem('favorites')); console.dir(JSON.parse(localStorage.getItem('favorites'))) }
}

function removeAsFavorite(item){
  removeAsFavoriteByID(item.id)
}

function removeAsFavoriteByID(id){
  var favs = JSON.parse(localStorage.getItem('favorites'));
  var idx = favs.findIndex(x => x.id === id);
  delete favs[idx];
  var favs = favs.filter(function (el) {
    return el != null;
  });
  if (debug) { console.log('removeAsFavorite: '+favs); }
  if (favs.length){
    //console.log('favs does have a length');
    localStorage.setItem('favorites',JSON.stringify(favs));
  } else {
    //console.log('favs has no length');
    localStorage.setItem('favorites',JSON.stringify(new Array));
  }
  if (debug) { console.log('favInit-1 favorites: '+localStorage.getItem('favorites')); console.dir(JSON.parse(localStorage.getItem('favorites'))) }
}

if (debug){
  $('.product-ctas').append( '<a href="#" class="clearFavorites">clear favs</a>' );
  $('.product-ctas').on('click','.clearFavorites',function(e){
    e.preventDefault();
    localStorage.removeItem('favorites');
    alert('Favorites cleared');
    return false;
  });
}

Вот мой код для страницы избранного:

var debug = true; // Set to true to output message to the error console
$(document).ready(function() {
  var favs = favInit();
  displayFavorites('#favorites-list',favs);
});

function favInit(){
  // Get the existing favorites from localStorage
  var favs = JSON.parse(localStorage.getItem('favorites'));
  if (debug) { console.log('favInit-1 favorites: '+localStorage.getItem('favorites')); }
  // If localStorage.favorites doesn't exists, create an empty array
  if (favs != null && Array.isArray(favs) && favs.length){ } else {
    if (debug) { console.log('no favorites found in local storage. Creating an empty array'); }
    favs = new Array; // setup an empty array
    // Refresh local storage
    localStorage.setItem("favorites", JSON.stringify(favs));
    // pull favs from local storage
    favs = JSON.parse(localStorage.getItem('favorites'));
  }

  if (debug) { console.log('favInit-2 favorites: '); console.dir(favs); }

  return favs;
}

function displayFavorites(containerID,array){
  var $list = $('<ul/>'), id, item, image, title;
  for (var i=0; i<array.length; i++){
    item = array[i];
    if (debug) { console.log('item '+i+': '); console.dir(item); }

    id = item.id;

    $image = $('<a/>').attr('href',item.path).append( $('<img/>').attr('src',item.url).attr('title',item.name) );
    $title = $('<strong/>').append( $('<a/>').attr('href',item.path).text(item.name) );
    $list.append( $('<li/>').attr('id','itm'+id).append($image).append($title) );
  }
  $(containerID).html($list);
}

function removeAsFavoriteByID(id){
  var favs = JSON.parse(localStorage.getItem('favorites'));
  var idx = favs.findIndex(x => x.id === id);
  delete favs[idx];
  var favs = favs.filter(function (el) {
    return el != null;
  });
  if (debug) { console.log('removeAsFavorite: '+favs); }
  if (favs.length){
    //console.log('favs does have a length');
    localStorage.setItem('favorites',JSON.stringify(favs));
  } else {
    //console.log('favs has no length');
    localStorage.setItem('favorites',JSON.stringify(new Array));
  }
  if (debug) { console.log('favInit-1 favorites: '+localStorage.getItem('favorites')); console.dir(JSON.parse(localStorage.getItem('favorites'))) }
}

Answer 1

Не используйте delete, он заменит его на null/undefined

var favs = [{}]

delete favs[0]

console.log(favs)

Использовать сращивание

var favs = [{}]

favs.splice(0, 1)

console.log(favs)