CodeNewbie Community 🌱

Kovy424
Kovy424

Posted on

JavaScript - LocalStorage

Hi All,
I'm currently a newbie to WebDev and JavaScript.
I'm Attempting an exercise involving the concept of localStorage in JS.

The exercise involves taking user input of their favourite songs and adding it to localStorage and displaying the data on the DOM.

The requirements are to add a song and display this individually on the page, and then delete an instance of each song from the localStorage and the subsequently from the webpage.

I'm having challenges actually deleting the song from the localStorage -- if I click on the delete button -- it should delete that instance of the song from the localStorage array and the DOM BUT it actually deletes 2 or more objects from the arrays on of Songs I have in localStorage.

I've tried everything I could think of and would love advice on how to solve this issue. I've shared the JS code and user interface for your perusal.
Thanks in advance

`
JAVASCRIPT CODE
//Retrieving all the elements
let artistName = document.getElementById("artistName");
let songTitle = document.getElementById("title");
let albumTitle = document.getElementById("album");
let yearReleased = document.getElementById("rel-year");

//Initiated an empty array to store all songs
let songArray = [];

function pageLoad() {
if (localStorage.getItem("hasCodeRunBefore") === null) {
localStorage.setItem("songs", JSON.stringify(songArray));
localStorage.setItem("hasCodeRunBefore", true);
} else {
//Using a forEach loop to loop through the songArray to populate the song data on the webpage
let songContainer = document.getElementById("song-display-container");
songContainer.innerHTML = "";
songArray = JSON.parse(localStorage.getItem("songs"));
songArray.forEach(function (song, index) {
let songDisplay = document.createElement("div");
songDisplay.setAttribute("id", "song-display");
songDisplay.innerHTML =
<h2>Song: ${song.songTitle}</h2>
<ul>
<li>Artist: ${song.artist}</li>
<li>Album: ${song.albumTitle}</li>
<li>Release Year: ${song.releaseYear}</li>
<li>Genre: ${song.musicGenre}</li>
</ul>
;
songContainer.appendChild(songDisplay);

  //Code to delete the song from DOM and localStorage
  let btn = document.createElement("button");
  btn.setAttribute("class", "btn btn-primary");
  btn.innerHTML = "Delete";
  songDisplay.appendChild(btn);
  btn.addEventListener("click", function (event) {
    //Deleting song entry from the DOM
    let songItem = event.target;
    songItem.parentElement.remove();
    //Deleting song entry from local storage
    songArray.splice(index);
    localStorage.setItem("songs", JSON.stringify(songArray));
  });
});
Enter fullscreen mode Exit fullscreen mode

}
}

/ADDING A NEW SONG TO [SONG ARRAY] AND LOCAL STORAGE/
//Used the constructor function to create the Song class with properties.
function Song(aName, title, album, relYear, genre) {
this.artist = aName;
this.songTitle = title;
this.albumTitle = album;
this.releaseYear = relYear;
this.musicGenre = genre;
}

//Function to add to new song object to the songArray and localStorage.
function addSong() {
let musicGenre = document.getElementById("genre-select");
songArray = JSON.parse(localStorage.getItem("songs"));
let newSong = new Song(
artistName.value,
songTitle.value,
albumTitle.value,
yearReleased.value,
musicGenre.value
);
songArray.push(newSong);
localStorage.setItem("songs", JSON.stringify(songArray));
pageLoad();
}

//CLEAR LOCAL STORAGE
function clearLS() {
localStorage.clear();
}
`

Top comments (1)

Collapse
 
kovy424 profile image
Kovy424 Author

This is the image of the simple UI
Image description