SSR & LocalStorage

[jycouet]

Hi Svelties,
Let me try to explain my question...

I have a table displaying some items, and by default, I have a page_size: 10.
In my load function, I grab 10 items and display them on my page. It's working well in SSR & CSR.

Now, let's add a new feature and users can change pageSize from the UI with 3 options: 10, 20 and 30.
I would like this setting to persist day after day... sort of "user preference". Not something critical and that can change a lot!

I jumped to LocalStorage (too quickly!) as it's a great way to customize and save user experience in the browser. But it's not ideal for SSR! If Robert likes page_size: 20, I'll save it into his localStorage but then:
1/ the server load grabs 10 items
2/ then the client load looks at the localStorage and grabs 20 items.
=> Step 1 took time and didn't get the right data.

So: How to make SSR & LocalStorage work together? => Don't use the LocalStorage!

Ok, but how to do that then?

Option 1: Session

A week ago, I wanted to move to Session... Let's skip this option as it's no longer there 😅

Option 2: Cookie

Having a cookie like user_pref storing this kind of info to be reused in subsequent navigation.

Conceptual Steps:
1/ Create ./src/routes/save-user-pref/+server.ts, where we will be able set the cookie

event.setHeaders({
  "set-cookie": serialize("user_pref", "page_size: 20"),
});

2/ Each time I change a setting, I'll need to

await event.fetch("/save-user-perf", {
  method: "POST", body: JSON.stringify({ pageSize }),
});

3/ In +layout.server.ts I can read the user_pref cookie and return it

const user_pref = ... // get from cookie
return {
  user_pref
};

4/ Each time I need user_pref, I'll need to await parent

export const load: PageLoad = async (event) => {
  const { user_pref } = await event.parent();
}

It seems to be a lot of code. Is it the right approach?
Maybe most of it could be hidden in a hook? within a lib? 😁

Option 3: Database

Essentially same steps as the cookie one... But writing in DB each customization change.
As I'm using this for filtering, status change, ... it seems to be a lot of writing and I'm not convinced it's the right thing to do...

---

Maybe there is another option that I didn't think about that would be way nicer?
Anyway, thx a lot for reading until here. Let me know what you think 👍

[kevinrenskers]

I'm kind of wondering the same thing, but not related to LocalStorage. In my case I have an external API, where the user can login, which returns a token. After that all requests to this API have to send along this token. Until now I've stored this token in an http-only cookie, which I copied into the session data using hooks.js. Super simple.

So I have the same question: the new method seems to be a lot of code, is it the right approach? How do other people handle storing auth tokens for external APIs?

[jycouet]

Interesting, I would be curious to see how to solve this as well elegantly 👍

[david-plugge]

maybe this can help you

[kevinrenskers]

Yeah but until #6056 is merged, that means an extra request for every single page view. So a serious step back. I'm going to wait a while before upgrading from 405.

[david-plugge]

Regarding the cookie, cant you simply set it on the Client? It does not have to be a http only cookie in this case

[jycouet]

🤔 could you point me to some code or something?
Seems interesting to dig into 👍

[david-plugge]

js-cookie for example

[jycouet]

I will have a look, seems promising. Thx a lot

[CaptainCodeman]

The best place to store this config may come down to exactly where and how it's used but fundamentally, nothing that you put in localStorage is available to the server until a page has loaded and another request made that incorporates it. If you are going to send a bare request (with no pagination parameters) and want a custom setting it has to go in the cookie.

Alternatively, you set it as a URL parameter and expect them to bookmark that page or the pages that need it are always navigated to once the app is running so you can store it locally (localStorage or browser accessible cookie) and then generate links with it as a parameter (then the only thing the server ever need to check is the search param).

Don't forget that if you do any kind of http caching you need to factor that in which can make a search param a better option than a cookie, and it also makes the URL more "hackable" (although you should always limit the accepted values to protect your database).

[souravjamwal77]

Hi @CaptainCodeman
How do I access localStorage?
I'm able to set the access and refresh tokens but couldn't access them.