On page refresh, keep the styles I have set on the values in local storage

On page refresh, keep the styles I have set on the values in local storage

The styles apply and local storage works fine, but when I do a page
refresh, the styles aren't applied to the links again. The values are
still in local storage, but it's not showing visually on the page. How can
I do a check to apply those styles to the values in the array that are in
local storage.
$(".favorites").click(function() {
var favorite = localStorage.getItem( 'favorite' );
var petid = $(this).attr('data-petid');
var index;
favorite = JSON.parse(favorite) || [];
if ((index = favorite.indexOf(petid)) === -1) {
favorite.push(petid);
$(this).css('background-image',
'url(../assets/img/heart-red.svg)');
$(this).css('background-color', '#fefefe');
}else {
$(this).css('background-image',
'url(../assets/img/heart-full.svg)');
$(this).css('background-color', '#25aae3');
favorite.splice(index, 1);
}
localStorage.setItem('favorite', JSON.stringify(favorite) );
});