atomWithStorage - How is localStorage v.s. AsyncStorage decided?

[johnrhombus]

I'm working on a project in which our state is using jotai and is stored in a common project that is used in both web and mobile.

One of our state atoms defined in this common project uses the atomWithStorage atom type. The hope was that this would use localStorage on the browser, and AsyncStorage in the mobile projects. Yet it appears that the mobile projects are actually using localStorage as well, as we see the following warnings:

ReferenceError: Property 'localStorage' doesn't exist.

If I simply use atom instead of atomWithStorage in this common state file, then the warnings disappear on mobile.

I am wondering - How does jotai know when to use AsyncStorage and when to use local storage?

AsyncStorage is a runtime dependency of the mobile project and is working when used directly outside of jotai.

How can I tell jotai to use AsyncStorage when running on mobile, but use localStorage on the web, without directly referencing either? Is this even possible?

If not, it may be nice to provide a way for setting the storage provider globally for jotai, rather than on a per atomWithStorage basis...? Then one could set it to AsyncStorage when the mobile app loads, and leave it as the default localStorage otherwise.

Maybe I missed it but I didn't really see anything about this in the docs: https://jotai.org/docs/utils/atom-with-storage

[dai-shi]

Sorry, the doc is missing for custom storage usage. It would be so nice if someone can contribute on it.

If not, it may be nice to provide a way for setting the storage provider globally for jotai, rather than on a per atomWithStorage basis...?

It sounds like you know how to use is for per atomWithStorage basis?
In that case, my suggestion is to define a new function on your end.

const atomWithStorageAuto = (key, initialValue) => {
  let storage;
  if (it has async storage) {
    storage = createJSONStorage(() => AsyncStorage);
  } else {
    storage = createJSONStorage(() => localStorage);
  }
  return atomWithStorage(key, initialValue, storage);
};

[johnrhombus]

Forgive me if I've missed this somewhere but where is the createJSONStorage(..) function? I don't see it as an available import from jotai or jotai utils..

[dai-shi]

It's not your fault as missing docs, but it should be exported from jotai/utils.

jotai/src/utils.ts

Line 18 in 17de495

createJSONStorage,

[johnrhombus]

🥳 thank you! Your suggestions were excellent and I was able get it working perfectly.

[TwistedMinda]

@johnrhombus Don't forget to select the accepted answer :)