Carrot Rübe
Issue with localStorage and signals
Hii sorry to bother y'all but I have been having this problem for 3 days now, so everytime I change the cdg object (changing the gameImage and gameTitle) if I go to dev tools it shows that it changed but later it isn't showing the new gameImage nor gameTitle
I tried passing it down as props or use createComputed, or createMemo but it doesn't seem to even see the change of CDG.
const [currentImage, setCurrentImage] = createSignal('')
const [currentTitle, setCurrentTitle] = createSignal('')
createEffect(() => {
const handleChange = () => {
const gameStorageInfo = localStorage.getItem('CDG');
if (gameStorageInfo) {
try {
const games = JSON.parse(gameStorageInfo);
if (games.length > 0) {
const firstGame = games[0];
setCurrentImage(firstGame.gameImage);
setCurrentTitle(firstGame.gameTitle);
}
} catch (error) {
console.error('Error parsing JSON:', error);
}
}
};
window.addEventListener('storage', handleChange);
onCleanup(() => {
window.removeEventListener('storage', handleChange);
});
handleChange();
});
return (
<>
{currentImage() ? (
<>
<Dynamic
component="img"
className="current-image"
src={currentImage()}
alt="Game Image"
/>
<div className="current-text-container">
<Dynamic
component="p"
className="currently-downloading-game-title"
>
{currentTitle()}
</Dynamic>
</div>
</>
) : (
<p>No active downloads</p>
)}
</>
const [currentImage, setCurrentImage] = createSignal('')
const [currentTitle, setCurrentTitle] = createSignal('')
createEffect(() => {
const handleChange = () => {
const gameStorageInfo = localStorage.getItem('CDG');
if (gameStorageInfo) {
try {
const games = JSON.parse(gameStorageInfo);
if (games.length > 0) {
const firstGame = games[0];
setCurrentImage(firstGame.gameImage);
setCurrentTitle(firstGame.gameTitle);
}
} catch (error) {
console.error('Error parsing JSON:', error);
}
}
};
window.addEventListener('storage', handleChange);
onCleanup(() => {
window.removeEventListener('storage', handleChange);
});
handleChange();
});
return (
<>
{currentImage() ? (
<>
<Dynamic
component="img"
className="current-image"
src={currentImage()}
alt="Game Image"
/>
<div className="current-text-container">
<Dynamic
component="p"
className="currently-downloading-game-title"
>
{currentTitle()}
</Dynamic>
</div>
</>
) : (
<p>No active downloads</p>
)}
</>
6 replies