Anzeigen von lokalen Speicher in der Seite: Jquery

Question

Ich bin in der Lage, zu lokalen Speicher hinzuzufügen und Elemente zu entfernen, aber es zeigt nicht das hinzugefügte Element in meinem HTML. Sobald etwas zum lokalen Speicher hinzugefügt wurde, sollte es auf einer Favoriten-Seite angezeigt werden. Wenn es entfernt wurde, sollte es von der Favoriten-Seite entfernt werden. Es ist der Favoritenbereich des Codes, der scheinbar nicht funktioniert.

//Add Favorites 
 
$('.favoritesbtn').click(function() { 
 
    var storedbar = JSON.parse(localStorage.getItem('storedBar')); 
 
    var favArray = []; 
 
    favArray.push(storedbar.id, storedbar.barname, storedbar.address, storedbar.description, storedbar.image); 
 
    localStorage.setItem('favorites', JSON.stringify(favArray)); 
 
    console.log(localStorage.getItem('favorites')); 
 

 
}); 
 

 
//viewing favorites 
 

 
var favBar = JSON.parse(localStorage.getItem('favorites')); 
 
console.log(favBar); 
 

 
function displayPageContent(object) { 
 
    if (object) { 
 
    $('#bar-info h2').html(object.barname); 
 
    $('#bar-info h5').html(object.address); 
 
    $('#bar-info p').html(object.description); 
 
    $('#bar-info img').html(object.image); 
 
    } 
 
} 
 
displayPageContent(favBar); 
 

 
//Removing favorites 
 
$('.removebtn').click(function() { 
 
    console.log('delete'); 
 
    localStorage.removeItem('favorites'); 
 
    console.log(localStorage.getItem('favorites')); 
 
});

Answer 1

Sie benötigen displayPageContent(localStorage.getItem('favorites')); jedes Mal, wenn Sie ändern zu 'Favoriten' machen nennen.

Ich habe nicht Ihren anderen Code wie HTML, wenn dies nicht funktioniert, posten Sie Ihren anderen Code. und stellen Sie sicher, dass Sie in Ihrem Konsolenprotokoll nachsehen, ob die Daten korrekt sind.

//Add Favorites 
 
$('.favoritesbtn').click(function() { 
 
    var storedbar = JSON.parse(localStorage.getItem('storedBar')); 
 
    var favArray = []; 
 
    favArray.push(storedbar.id, storedbar.barname, storedbar.address, storedbar.description, storedbar.image); 
 
    localStorage.setItem('favorites', JSON.stringify(favArray)); 
 
    console.log(localStorage.getItem('favorites')); 
 
    //update view 
 
    displayPageContent(localStorage.getItem('favorites')); 
 
}); 
 

 
//viewing favorites 
 

 
var favBar = JSON.parse(localStorage.getItem('favorites')); 
 
console.log(favBar); 
 

 
function displayPageContent(object) { 
 
    if (object) { 
 
    $('#bar-info h2').html(object.barname); 
 
    $('#bar-info h5').html(object.address); 
 
    $('#bar-info p').html(object.description); 
 
    $('#bar-info img').html(object.image); 
 
    } 
 
} 
 
displayPageContent(favBar); 
 

 
//Removing favorites 
 
$('.removebtn').click(function() { 
 
    console.log('delete'); 
 
    localStorage.removeItem('favorites'); 
 
    console.log(localStorage.getItem('favorites')); 
 
    //update view 
 
    displayPageContent(localStorage.getItem('favorites')); 
 
});