[atomWithStorage] - Feature request for storing in cookies instead of localStorage/sessionStorage

[noccer]

As per the description.

I really like Jotai, probably my favourite state manager. And I think atomWithStorage is brilliant. However it does not play well with SSG pages.

Would something like atomWithCookie ever be considered? On a NextJS SSR website that I am building, I would like to persist unAuthenticated users' darkMode config settings in their cookies (not localStorage), so that when they visit my site, NextJS knows what version of the site to serve them (light or dark).

In the meantime I think I will just write an updater that syncs the atom value manually in cookies, not a difficult task.

Thanks and congrats on a great library. ☘️

[dai-shi]

Hi, atomWithStorage is not tied to localStorage (although, it's the default), and we make it as flexible as possible, so that we can use it with any kind of storage.
We don't have well established docs for atomWithStorage. Meanwhile, if you have problems using it for cookies, please feel free to let us know here.

It's roughly like:

const cookieStorage = createJSONStorage(() => {
  ...
  return {
    getItem: ...,
    setItem: ...,
    removeItem: ...,
  };
});
const anAtom = atomWithStorage('key', 'initial value', cookieStorage);

---

I don't think we will add atomWithCookie, but adding it in "advanced recipes" docs is an option. Alternatively, would love to see if someone works on a third-party library.

[noccer]

Thanks for such a comprehensive and fast response, much appreciated.

I didn't realise atomWithStorage already had an option to choose your storage, I will try have a play to get it working.

A 3rd-party library is a nice idea. If I can get my solution cleanly working, and if I can get enough spare time, I would like to try extract it into a shareable library.

Many thanks again ☘️

[dai-shi]

#805 seems to have a priority.

[martin-linden]

I would also like to use atomWithStorage with cookies. Unfortunately I do not really understand how to do this without a detailed documentation. @noccer Did you get something to work and in that case would you like to show an example of a working solution?

Thanks

[noccer]

Hi @martin-linden sorry I didn't see this message.

I didn't pursue atomWithStorage much further due to other life commitments that came up (🆕🏠)

I did however manage to roll my own version but I can't seem to find what repo I tried this out in.

Pseudo code:

• you store the theme value in cookies eg: 'light' | 'dark'
  • I used js-cookie
• when you make a request to your NextJS app, the cookies go along for the ride and are available to your backend. On your backend you look at that cookie value, then render your page based off that cookie value.

Hope this makes sense and is useful. I used Jotai on the client to manage the cookie value changing, something kinda like this:

import Cookies from 'js-cookie';
...
export type ThemeMode = 'light' | 'dark';
export const themeModeAtom = atom<ThemeMode>('light'); // source of the problem
const swapThemeModeAtom = atom(
    (get) => get(themeModeAtom),
    (get, set) => {
        const newThemeValue = get(themeModeAtom) === 'dark' ? 'light' : 'dark';
        Cookies.set('themeMode', newThemeValue);
        return set(themeModeAtom, newThemeValue);
    },
);

No idea if I am abusing/misusing jotai here! But from memory this is what worked for me at the time before I had to bail on that project.

☘️

[dai-shi]

(The code snippet looks good. It's actually interesting to me that cookie is readable on server unlike localStorage. useHydrateAtom might help for NextJS/SSR case.)

[Pedromdsn]

Up
This would be perfect for the next js

[electroheadfx]

I modified the code, it works, but I have Hydratation error (next JS), any idea ?

export type IContext = 'catenary' | 'track' | 'all'

const cookieStorage = createJSONStorage<IContext>(() => {
  return {
    getItem: () => Cookies.get('contextRail') as IContext,
    setItem: (ctx, value) => Cookies.set(ctx, value),
    removeItem: (ctx) => Cookies.remove(ctx),
  }
})

export const contextRailAtom = atomWithStorage<IContext>('contextRail', 'all', cookieStorage)

I tried to add : delayInit: true to
`export const contextRailAtom = atomWithStorage('contextRail', 'all', cookieStorage, delayInit: true)
but it can't work seem 1.13.1 can't support it ?

[electroheadfx]

its fixed and work now, it just need to have delayInit in an object:
export const contextRailAtom = atomWithStorage('contextRail', 'all', {...cookieStorage, delayInit: true}

[andrewdoro]

I modified the code, it works, but I have Hydratation error (next JS), any idea ?

export type IContext = 'catenary' | 'track' | 'all'

const cookieStorage = createJSONStorage<IContext>(() => {
  return {
    getItem: () => Cookies.get('contextRail') as IContext,
    setItem: (ctx, value) => Cookies.set(ctx, value),
    removeItem: (ctx) => Cookies.remove(ctx),
  }
})

export const contextRailAtom = atomWithStorage<IContext>('contextRail', 'all', cookieStorage)

I tried to add : delayInit: true to `export const contextRailAtom = atomWithStorage('contextRail', 'all', cookieStorage, delayInit: true) but it can't work seem 1.13.1 can't support it ?

would this code call Cookies.get on every rerender?

[dai-shi]

would this code call Cookies.get on every rerender?

It should call once on the first render.