/** @jsxImportSource https://esm.sh/react@18.2.0 */ import React, { useState, useEffect } from "https://esm.sh/react@18.2.0"; import { createRoot } from "https://esm.sh/react-dom@18.2.0/client"; function App() { const [count, setCount] = useState(0); const [loading, setLoading] = useState(true); useEffect(() => { async function fetchCount() { try { const { blob } = await import("https://esm.town/v/std/blob"); const savedCount = await blob.getJSON('counterValue'); if (savedCount !== null) { setCount(savedCount); } setLoading(false); } catch (error) { console.error('Failed to load count:', error); setLoading(false); } } fetchCount(); }, []); const updateCount = async (newCount: number) => { try { const { blob } = await import("https://esm.town/v/std/blob"); await blob.setJSON('counterValue', newCount); setCount(newCount); } catch (error) { console.error('Failed to save count:', error); } }; return (

Persistent Counter App 🚀

This counter saves its value between page reloads.

{loading ? 'Loading...' : count}

View Source

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } export default async function server(request: Request): Promise { return new Response(` Persistent Counter

`, { headers: { "content-type": "text/html", }, }); }

app

Version 2