SolidJS•6mo ago

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

    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>
            )}
        </>

I tried passing it down as props or use createComputed, or createMemo but it doesn't seem to even see the change of CDG.

3 Replies

Carrot RübeOP•6mo ago

I tried passing it down as props or use createComputed, or createMemo but it doesn't seem to even see the change of CDG. When I first open the app it shows the old gameImage and gameTitle but when I set new ones in another component it doesn't update and I have to reload the page for it to work

peerreynders•6mo ago

https://playground.solidjs.com/anonymous/2610f02f-d7d8-4860-813f-c6360e119997 The issue is that:

The storage event of the Window interface fires when a storage area (localStorage or sessionStorage) has been modified in the context of another document.

You don't get a storage event within the document that updated storage.

Solid Playground

Quickly discover what the solid compiler will generate from your JSX template

Carrot RübeOP•5mo ago

Sorry for the late answer I have been busy Thank you for this I will try it out soon and keep you updated 🫶🏻 I am really thankful it worked perfectly

Gaming

Programming

Issue with localStorage and signals