Rumah > hujung hadapan web > tutorial js > Mengendalikan Storan Tempatan untuk Pemberitahuan Pembakar

Mengendalikan Storan Tempatan untuk Pemberitahuan Pembakar

Patricia Arquette
Lepaskan: 2025-01-03 04:03:39
asal
420 orang telah melayarinya

Handling Local Storage for Toaster Notifications

Demo :


Kod sumber :

============= layout.tsx 
<body>
   <ThemeProvider attribute="class" defaultTheme="dark">
     {children}
      <DevToaster />
   </ThemeProvider>
</body>

============= dev-toaster.tsx 
export function TemplateToaster() {
  const [isVisibile, setIsVisible] = useState(true);
  const [notificationStatus, setNotificationStatus] = useState<string | null>(null);
  const path = usePathname();
  const [hydrated, setHydrated] = useState(false);

  // Run this effect only once to set hydrated to true
  useEffect(() => {
    setHydrated(true);
  }, []);

  // Run this effect only on client side
  useEffect(() => {
    if (hydrated) {
      // Remove the saved notification status to reset it
      localStorage.removeItem("behindui-notification");
      // Check localStorage after clearing
      setNotificationStatus(localStorage.getItem("behindui-notification"));
    }
  }, [hydrated]);

  if (!hydrated) {
    return null;
  }

  const templates = path.includes("templates");
  const isIframe = isInIframe();
  if (isIframe || notificationStatus === "off") {
    return <div></div>;
  }

  return (
    isVisibile &&
    !templates && (
      <section className="relative z-50">
        <div className="font-geist fixed bottom-4 right-4">
          <Card className={cn(" w-[350px] bg-background [border:1px_solid_rgba(255,255,255,.1)]")}>
            <CardHeader>
              <div className="font-mono font-bold  uppercase tracking-tight">
                ?Website Under Development ? <br />
              </div>
              <CardDescription className="mt-4 text-black/90 dark:text-white/70">This website is currently in active development. Some features may be incomplete or not working as expected</CardDescription>
            </CardHeader>
            <CardFooter className="flex justify-end gap-4">
              <Button
                size="sm"
                onClick={() => {
                  localStorage.setItem("behindui-notification", "off");
                  setIsVisible(false);
                }}
              >
                Understand
              </Button>
            </CardFooter>
          </Card>
        </div>
      </section>
    )
  );
}

function isInIframe() {
  try {
    return window.self !== window.top;
  } catch (e) {
    return true;
  }
}

Salin selepas log masuk
<script> // Detect dark theme var iframe = document.getElementById('tweet-1874817943860834535-693'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1874817943860834535&theme=dark" } </script>

Atas ialah kandungan terperinci Mengendalikan Storan Tempatan untuk Pemberitahuan Pembakar. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan