I'm new to Sveltekit and writing an app for tracking notes about books I'm reading. There is a list of book series, clicking one shows a list of volumes in that series, clicking one shows your notes for that volume.

I need to store: the list of series, which series is selected, the list of volumes, which volume is selected. Where do I store this?

What I've tried:

I have the pages setup as nested layouts, the top level loads series, a nested layout checks what's selected based on the route parameters and loads the volumes, and so on. My most nested route looks like this: /series/[seriesId]/volumes/[volumeId], with a layout at each level to load/set what it can.

I tried putting state in props returned from load on my layout, but then I can't update it if I add a new series or volume, it seems to just wipe out my change next time the layout renders. I also can't access it from nested layouts. If the volume selector layout loads the volumes in props, the nested layouts that shows notes can't access that because I can't directly pass my props to it without setting it somewhere else accessible from both places as rendering that component/layout is done by Sveltekit.

I tried putting state in session, but that can only be changed client-side and I can't SSR what's selected then.

I tried putting state in page.stuff but that's read-only outside of load, so again I can't update it if I add a new series or volume.

I've got a mix of this and it's super buggy. Any advice? If I was writing a normal SPA I'd just store these in a few stores but in SSR that becomes global state, which is why I'm trying to figure out a workaround here.