How to call client-side APIs on the page level?

[hpohlmeyer]

I have a page with an code input that redirects you to a subroute with that code at the end. Essentially the flow looks like this:

1. You enter something like abc into the input
2. On submit a post request is send, which validates the code against the db
3. If the code is valid you get redirected to https://my-page.com/abc

That works fine, but now I want to store the code in local storage once it has been validated. And that’s where I am stuck.
Normally, I would use a useEffect on the page level to store the param in the local storage, but that would put it into deno’s local storage.

I know that I need a dynamic island for client-side interactive content, so I have created an island that only uses hooks and does not render anything:

import { useEffect } from "preact/hooks";

type Props = {
  id: string;
  value: string;
};

export default function LocalStorage({ id, value }: Props) {
  useEffect(() => {
    localStorage.setItem(id, value);
  }, [id, value]);

  return null;
}

On my site I am using it like this:

export default function MyPage(props:  PageProps) {
  return (
    <>
      <LocalStorage id="code" value={props.params.code} />
      <h1>Hello World</h1>
    </>
  )
}

But nothing is written to the local storage, instead I see this error:

Uncaught TypeError: replaceNode[(replaceNode.length - 1)] is undefined

Returning a fragment (<></>) results in the same error.
It only goes away if I return actual content. I could do that and hide it with CSS, but the whole approach feels very hacky.

Is there a proper way to do this? I though about using cookies instead of the local storage, because I could set them in the redirect of the post request handler, but since I never need the information on the server, local storage would be more appropriate.

[kt3k]

Looks like the same issue as #502

[JacobWeisenburger]

I'm pretty sure the problem is return null. I don't really understand why, but fresh doesn't seem to like that. In my experience, using return <span class='hidden'></span> works.

here's the full example:

import { useEffect } from 'preact/hooks'

type Props = {
    id: string
    value: string
}

export default function LocalStorage ( { id, value }: Props ) {
    useEffect( () => {
        localStorage.setItem( id, value )
    }, [ id, value ] )

    return <span class='hidden'></span>
}

If you found my answer satisfactory, please consider supporting me. Even a small amount is greatly appreciated. Thanks friend! 🙏
https://github.com/sponsors/JacobWeisenburger