atomWithStorage

params

key

initialValue

storage (optional)

getItem(key, initialValue)

setItem(key, value)

removeItem(key)

subscribe(key, callback, initialValue) (optional)

options (optional)

getOnInit (optional, by default false)

初期化時にstorageからアイテムを取得するかどうか

utils

createJSONStorage

withStorageValidator

keyて基本的に静的なものになるのかmrsekut.icon

だからuserIdとか指定できない

だからDBと同期する、といった使い方はやりづらい

LocalStorageとかCookieとかがユースケースになる

local/remoteを区別せずstorageを扱えるとよいのだが

code:ts

import { useAtom } from 'jotai'

import { atomWithStorage } from 'jotai/utils'

const darkModeAtom = atomWithStorage('darkMode', false)

const Page = () => {

const darkMode, setDarkMode = useAtom(darkModeAtom)

return (

<h1>Welcome to {darkMode ? 'dark' : 'light'} mode!</h1>

<button onClick={() => setDarkMode(!darkMode)}>toggle theme</button>

</>

)

}