I have a page with multiple divs. Users can bookmark each div by clicking an icon. When the icon is clicked, I'm adding a .saved-item class to the div. I have a separate page where I'd like to show all bookmarked divs but I can't figure out how to do it properly.
Function which adds class to the div:
$('.bookmark').on('click', function(){
$(this).parent().parent().addClass('saved-item');
});
In another file, I then try to load all saved items:
$("#content").load( "speaking-mistakes.html #wrapper .saved-item" );
Unfortunately, it's not working as the addClass function is not permanent. I also tried adding the div to the localStorage, but it doesn't save the entire div layout and its content (with buttons, text, style, etc.) and I don't think that loading up localStorage with possibly hundreds of divs would be a good idea.
Is there any possibility to dynamically "move" or "export" a div from one HTML file to another HTML file?
Thank you for your help.
It depends where the content is coming from.
These things are normally saved in a database server side. And when an icon is clicked, you can add an entry in the bookmarks table in your database.
If you want to do it through client side, you can use indexedDb or local storage
So you would have an array of bookmarked ids
const ids = [ 1, 35, 64 ]
when you click an icon it can push the id to this array which is then saved into localstorage like this
localStorage.setItem("bookmarks", JSON.stringify(ids))
As an extra, if a user is signed in, you can add their user id as item 0 in the bookmarks array as a way to 'authenticate' them so when other users log in, they dont see the previous users bookmarks.
This should really be done server side for best practise