How to make javascript bookmarking function?

I’m working on a movie site and want to set up a favory system. There is a star icon on the movies. When this icona is pressed I add an id called “favorite” and when this id is added, the color of the star changes. I also save the id and name of the favorite movie to localstorage, but this id disappears every time I refresh the page. How can I ensure that this id does not disappear every time I refresh the page? Or, if you suggest a different way to add to favorites, you can write it as well.

function addFavorite(event) {
    let target = event.target.className
    let sameCheck = Storage.getAllFilmsToStorage()
    let check = sameCheck.map(item => item.id)
    if (target == "fa fa-star") {
        if (check.indexOf(event.target.parentElement.parentElement.parentElement.id) == -1) {
            Storage.addAllFilmsToStorage(event.target.parentElement.nextElementSibling.children[0].textContent, event.target.parentElement.parentElement.parentElement.id)
            favoriteUI(event.target.parentElement.parentElement.parentElement.id)
        }
    }
    if (check.indexOf(event.target.parentElement.parentElement.parentElement.id) == -1 && target == "fa fa-star") {
        event.target.id = "favorite"
    }
    if (check.indexOf(event.target.parentElement.parentElement.parentElement.id) >= 0 && target == "fa fa-star") {
        event.target.id = ""
    }
}

Full Code: GitHub - BerkayAkgurgen/Film-ProjectAPI

Hey @OyeeBerkay ,

You said you already implemented a function where it stored the favorites into the localstorate. Well now all you need is a function that runs when the DOM is loaded that grabs the favorites from localstorage and add the IDs to the movies accordingly.

Thanks @Catalactics,
Still, I am having trouble doing this. I know what to do but I have a hard time doing this because I get the movies from the API and upload them to the interface, and then I can’t figure out how to get their id and then load the id.

It looks like the API you use gives you an IMDB ID which you can use to identify the movies. So what you can do is before you render the UI, you want to add the id right there, then render it.

Then you can store the IMDB ID into the localstorage with the movie name. Then you can create a function that before it renders, it check the movie’s IMDB ID if it is in the localstorage, if it is, then you can add the id, if not, then don’t add it. Here’s an example:

If you care about the efficiency, that means you’re going to store the favorites in an object like so:

{
     'imdbID': {
          name: 'movie-name',
          more-properties
     },
     'imdbID': {
          name: 'movie-name',
          more-properties
     }
}

Then we can do a simple object accessing like so:

// This will try to access an object with the IMDB ID
// Then it checks if it's not undefined
let isFavorite = favorites[imdbID] !== undefined; 

// This will return true or false
// True means it's in the favorites
// False means it's not in the favorites

Then when you’re rendering, we can do something like:

let container = `<div id='${isFavorite ? "favorite-class" : ""}'></div>`

What it does is it check if it’s a favorit, if it is, give it the class, otherwise, just give it an empty string

Hopefuly this give you an idea on what to do :slight_smile:

1 Like

Thank you, it seems better in my mind, but some of them do not understand. How can I upload movies without installing an interface? Because I get a result according to the search made through the input on the site and my divs are formed according to the result. To better understand what I mean, you can look at the “displayResults” function in the ui.js file in the github repository.

I fixed the problem with a little tweaking on your idea. First I got the id property from local storage and then added the following codes.

let favoriteFilms = Storage.getAllFilmsToStorage()
let favoriteFilmsID = favoriteFilms.map(item => item.id)
favoriteFilmsID.indexOf(item.imdbID) === -1 ? "" : "favorite"
1 Like

Great! Glad I could help you :slight_smile:

Happy Coding!

1 Like