diff --git a/src/components/BestPracticeHeader.astro b/src/components/BestPracticeHeader.astro
index 32b9d016a..125080225 100644
--- a/src/components/BestPracticeHeader.astro
+++ b/src/components/BestPracticeHeader.astro
@@ -27,7 +27,7 @@ const isBestPracticeReady = !isUpcoming;
diff --git a/src/components/FeaturedItems/MarkFavorite.tsx b/src/components/FeaturedItems/MarkFavorite.tsx
index dc188306f..1441d48ff 100644
--- a/src/components/FeaturedItems/MarkFavorite.tsx
+++ b/src/components/FeaturedItems/MarkFavorite.tsx
@@ -19,8 +19,12 @@ export function MarkFavorite({
favorite,
className,
}: MarkFavoriteType) {
+ const localStorageKey = `${resourceType}-${resourceId}-favorite`;
+
const [isLoading, setIsLoading] = useState(false);
- const [isFavorite, setIsFavorite] = useState(favorite ?? false);
+ const [isFavorite, setIsFavorite] = useState(
+ favorite ?? localStorage.getItem(localStorageKey) === '1'
+ );
async function toggleFavoriteHandler(e: Event) {
e.preventDefault();
@@ -76,10 +80,7 @@ export function MarkFavorite({
} = (e as CustomEvent).detail;
if (id === resourceId && type === resourceType) {
setIsFavorite(fav);
- localStorage.setItem(
- `${resourceType}-${resourceId}-favorite`,
- fav ? '1' : '0'
- );
+ localStorage.setItem(localStorageKey, fav ? '1' : '0');
}
};
diff --git a/src/components/RoadmapHeader.astro b/src/components/RoadmapHeader.astro
index 1cacba6da..5cc9cd43a 100644
--- a/src/components/RoadmapHeader.astro
+++ b/src/components/RoadmapHeader.astro
@@ -46,7 +46,7 @@ const isRoadmapReady = !isUpcoming;