[{"_1":2,"_212":-5,"_213":-5},"loaderData",{"_3":4,"_91":92},"root",{"_5":6,"_34":35,"_64":65},"ctx",{"_7":8,"_23":-5,"_24":25,"_26":27,"_28":22,"_29":22,"_30":22,"_31":32,"_33":22},"auth",{"_9":10,"_11":-5,"_12":-5,"_13":-5,"_14":-5,"_15":-5,"_16":-5,"_17":-5,"_18":-5,"_19":-5,"_20":-5,"_21":22},"tokenType","session_token","sessionClaims","sessionId","sessionStatus","userId","actor","orgId","orgRole","orgSlug","orgPermissions","factorVerificationAge","isAuthenticated",false,"user","preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","notificationCount",0,"flagDenols","ENV",{"_36":37,"_38":39,"_40":41,"_42":43,"_44":45,"_46":47,"_48":49,"_50":51,"_52":53,"_54":55,"_56":57,"_58":59,"_60":61,"_62":63},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","VAL_RUNTIME_NAME","prod","RENDER_GIT_COMMIT","ef3ea8f1dae7292ec07ba068df0da1cbbc96c24e","RENDER_GIT_BRANCH","main","CLERK_PUBLISHABLE_KEY","pk_live_Y2xlcmsudmFsLnRvd24k","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","API_URL","https://api.val.town","clerkState",{"_66":67},"__internal_clerk_state",{"_68":69,"_70":45,"_71":72,"_73":72,"_74":22,"_75":72,"_76":72,"_77":72,"_78":72,"_79":80,"_89":22,"_90":22},"__clerk_ssr_state",{"_9":10,"_11":-5,"_12":-5,"_13":-5,"_14":-5,"_15":-5,"_16":-5,"_17":-5,"_18":-5,"_19":-5,"_20":-5,"_21":22},"__publishableKey","__proxyUrl","","__domain","__isSatellite","__signInUrl","__signUpUrl","__afterSignInUrl","__afterSignUpUrl","__clerk_debug",{"_81":22,"_21":22,"_82":72,"_83":84,"_85":72,"_86":45,"_87":22,"_88":72},"isSignedIn","proxyUrl","reason","session-token-and-uat-missing","message","publishableKey","isSatellite","domain","__telemetryDisabled","__telemetryDebug","routes/_app.search",{"_93":22,"_94":32,"_95":96,"_97":98,"_99":100,"_101":102,"_103":104,"_105":106,"_107":108,"_198":142,"_199":142,"_200":32,"_201":32,"_202":32,"_203":142,"_204":205,"_206":207},"error","page","query","react client side","apiURL","https://codesearch.val.run/?q=react+client+side&format=json&page=1&type=docs","type","docs","fileResults",[],"projectResults",[],"userResults",[],"docResults",[109],{"_110":111,"_112":113,"_114":115,"_116":117,"_120":121,"_138":139,"_163":164,"_165":113,"_166":167,"_168":169,"_170":171},"url","https://docs.val.town/guides/saving-data-from-a-web-page/","content","Saving data from a web page. Copy page Copy page. Copy this page as Markdown for LLMs. View as Markdown View this page as plain text. Open in ChatGPT Ask questions about this page. There are many ways to save data from a web page, depending on your use-case, technologies, and other constraints. First, you’ll want to pick a storage mechanism. Val Town has two built-in: Blob storage is a very simple key-value store for storing files, JSON, images, large blobs of data, while SQLite is a SQL database with ACID transactions, indexes, and more. You can also use external services like Firebase, Supabase, Neon, Upstash, etc. Once you’ve picked a storage mechanism, you’ll need to decide how to interact with it. You can either use form submissions or client-side JavaScript to make API calls to Val Town. Blob storage. Section titled “Blob storage” For example, this val is an app that displays comments, accepts new comments, and allows you to delete comments. There are three parts relating to blob storage: GET / - Getting the comments from blob storage to render them on the page. POST /comment - Handling the form submission to add a new comment to blob storage. POST /comment/:id/delete – Handling the delete button to remove a comment from blob storage. The way this val is rendered (Hono JSX) and the the HTML page talks to the server (form submissions) is arbitrary and can be replaced with any other front-end framework or server-side rendering. For example, you could have a NextJS or Remix app that makes a call to Val Town to get the data. Or you a client side VueJS app that makes a call to Val Town to get the data from the browser. This is a remix of the above app that uses client-side React to make the API calls: You could easily host the React part anywhere (Vercel, Netlify, etc) and have it make calls to Val Town (via your val’s HTTP URL) to get and modify the data. You can learn more about blob storage here: Val Town Blob. SQLite example. Section titled “SQLite example” The above demo is simple because it stores the data in the same simple JSON format that you want on the frontend. However, there are many limitations to blob storage. The most egregious is that it’s not concurrency safe. If two people try to add a comment at the same time, one of the comments will be lost. For that – and many other reasons, such as indexing, querying, etc – you might want to use SQLite. This is the same Hono demo but using SQLite on the backend. We will leave it as an exercise to an ambitious and helpful reader to convert the React demo to use SQLite and submit a PR to this docs page. Note: we left the CREATE TABLE statement in the code, so that this val will immediately work if you remix it. However, you may want to comment out that line after the first run to speed up this val. You can learn more about SQLite here: Val Town SQLite.","word_count",521,"meta",{"_118":119},"title","Saving data from a web page","anchors",[122,129,134],{"_123":124,"_125":126,"_127":119,"_128":32},"element","h1","id","_top","text","location",{"_123":130,"_125":131,"_127":132,"_128":133},"h2","blob-storage","Blob storage",138,{"_123":130,"_125":135,"_127":136,"_128":137},"sqlite-example","SQLite example",348,"weighted_locations",[140,146,150,153,155,157,159,161],{"_141":142,"_143":144,"_128":145},"weight",1,"balanced_score",1024.2866,129,{"_141":147,"_143":148,"_128":149},0.5,128.03583,246,{"_141":142,"_143":151,"_128":152},512.1433,272,{"_141":142,"_143":151,"_128":154},273,{"_141":142,"_143":144,"_128":156},300,{"_141":142,"_143":151,"_128":158},301,{"_141":142,"_143":151,"_128":160},312,{"_141":142,"_143":151,"_128":162},459,"locations",[145,149,152,154,156,158,160,162],"raw_content","raw_url","/guides/saving-data-from-a-web-page/","excerpt","a client side VueJS app that makes a call to Val Town to get the data from the browser. This is a remix of the above app that uses client-side","sub_results",[172,180,191],{"_118":119,"_110":173,"_174":175,"_138":176,"_163":178,"_168":179},"https://docs.val.town/guides/saving-data-from-a-web-page/#_top","anchor",{"_123":124,"_125":126,"_127":119,"_128":32},[177],{"_141":142,"_143":144,"_128":145},[145],"need to decide how to interact with it. You can either use form submissions or client-side JavaScript to make API calls to Val Town.",{"_118":132,"_110":181,"_174":182,"_138":183,"_163":190,"_168":169},"https://docs.val.town/guides/saving-data-from-a-web-page/#blob-storage",{"_123":130,"_125":131,"_127":132,"_128":133},[184,185,186,187,188,189],{"_141":147,"_143":148,"_128":149},{"_141":142,"_143":151,"_128":152},{"_141":142,"_143":151,"_128":154},{"_141":142,"_143":144,"_128":156},{"_141":142,"_143":151,"_128":158},{"_141":142,"_143":151,"_128":160},[149,152,154,156,158,160],{"_118":136,"_110":192,"_174":193,"_138":194,"_163":196,"_168":197},"https://docs.val.town/guides/saving-data-from-a-web-page/#sqlite-example",{"_123":130,"_125":135,"_127":136,"_128":137},[195],{"_141":142,"_143":151,"_128":162},[162],"will leave it as an exercise to an ambitious and helpful reader to convert the React demo to use SQLite and submit a PR to this docs page. Note: we","totalCount","paginationCount","totalFileResults","totalProjectResults","totalUserResults","totalDocResults","executionTimeMs",1258,"results",{"_101":102,"_103":104,"_105":106,"_107":108,"_200":32,"_201":32,"_202":32,"_203":142,"_94":142,"_208":209,"_210":142,"_211":100,"_204":205},"pageSize",10,"totalPages","resultType","actionData","errors"]

Search

Docs1

Docs
1