What is atomWithStorage?
Basically to put it simply atomWithStorage
is a cool way for you the developer to persist data in your application, it's a function that will automatically store the data of the atom in localStorage
, sessionStorage
for React or AsyncStorage
for React Native.
That means you can persist your application data even if the user refreshes, closes or crashes the page or application and when the user comes back the data will still be there.
The only way to remove the data is if the user manually clears their browser cache, local storage, session storage and cookies.
How to use atomWithStorage
To use atomWithStorage
you need to import it from jotai/utils
and then you can use it like you would use atom
import {useAtom} from "jotai";
import {atomWithStorage} from "jotai/utils";
const themeAtom = atomWithStorage("theme", "dark");
const userSettingsAtom = atomWithStorage("userSettings",
{language: "en", country: "us", accentColor: "blue"}
);
export default function Page() {
const [theme, setTheme]=useAtom(themeAtom);
const [userSettings, setUserSettings]=useAtom(userSettingsAtom);
return (
<div>
<h1>Theme: {theme}</h1>
<h1>User Settings</h1>
<p>Language: {userSettings.language}</p>
<p>Country: {userSettings.country}</p>
<p>Accent Color: {userSettings.accentColor}</p>
</div>
);
}
As you see you can use atomWithStorage
just like you would use atom
, it really is as easy as that. It will automatically default to persisting the data in localStorage
but you can also pass in a second argument to specify where you want to store the data.
const themeAtom = atomWithStorage("theme", "dark", sessionStorage);
Learn more about Jotai
You can find out more about why I love Jotai in my post Why I love Jotai and you can find the official documentation here
Top comments (0)