Jotai atomWithStorage – انجمن DEV

atomWithStorage چیست؟

اساسا به بیان ساده atomWithStorage یک راه جالب برای شما توسعه دهنده است تا داده ها را در برنامه خود نگه دارید، این تابعی است که به طور خودکار داده های اتم را در آن ذخیره می کند. localStorage، sessionStorage برای React یا AsyncStorage برای React Native.

این بدان معناست که شما می توانید داده های برنامه خود را حفظ کنید، حتی اگر کاربر صفحه یا برنامه را به روز کند، ببندد یا خراب کند و زمانی که کاربر بازگردد، داده ها همچنان وجود دارند.
تنها راه حذف داده ها این است که کاربر به صورت دستی کش مرورگر، حافظه محلی، ذخیره سازی جلسه و کوکی ها را پاک کند.

نحوه استفاده از atomWithStorage

برای استفاده atomWithStorage شما باید آن را از آن وارد کنید jotai/utils و سپس می توانید از آن مانند آنچه که استفاده می کنید استفاده کنید 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 Settingsh1>
      <p>Language: {userSettings.language}p>
      <p>Country: {userSettings.country}p>
      <p>Accent Color: {userSettings.accentColor}p>
    div>
  );
}

همانطور که می بینید می توانید استفاده کنید atomWithStorage درست همانطور که شما استفاده می کنید atom، واقعاً به همین راحتی است. به‌طور خودکار به‌طور پیش‌فرض داده‌ها را در خود نگه می‌دارد localStorage اما شما همچنین می توانید یک آرگومان دوم را برای تعیین جایی که می خواهید داده ها را ذخیره کنید ارسال کنید.

const themeAtom = atomWithStorage("theme", "dark", sessionStorage);

درباره Jotai بیشتر بدانید

می توانید در پست من چرا من جوتای را دوست دارم بیشتر بدانید و اسناد رسمی را اینجا بیابید