💾 本地页面,云端数据

你的本地 HTML 页面也能存数据——
存到云端

磁盘上的文件用浏览器直接打开,或本地运行的 AI 应用:两者都能 POST 到 FormLM 开启 CORS 的 Data API。无需服务器、无需部署。

本地页面的无声缺陷

它跑得很漂亮,就是什么都记不住。

有些最好用的页面从未被托管过。放在文件夹里的个人仪表盘。一次对话里 AI 为你写的测验。躺在桌面、双击经 file:// 直开浏览器的计算器或打卡器。零部署、零成本、零维护——也零持久化。关掉标签页,它忘了;把文件挪到另一台机器,它也忘了。localStorage 看起来是答案,但它按浏览器、按配置隔离:你的数据永远嫁给了那一台机器的 Chrome 配置。

解法和静态站点是同一个,而且从 file:// 也管用:一个开启 CORS 的存储接口。FormLM 的 Data API 明确允许跨源 POST 与 GET,于是浏览器的同源规则——平时会拦住本地文件调用网络的那条——放你页面的 fetch 直接过。页面原地不动;数据去了云端。

localStorageFormLM Data API
浏览器配置丢失后数据仍在否是
跨设备可用否是
可被其他工具与 Agent 读取否是——HTTP query API
导出与分析在 devtools 里手动复制CSV 导出 + 汇总统计
搭建成本零一个免费接口

从本地页面到持久化应用

两个函数:save 和 load。这就是一个带云端记忆的本地应用。
// save.js——得益于 CORS,file:// 也能用
async function save(entry) {
  const res = await fetch("https://formlm.me/api/v3/share/YOUR_TOKEN", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ data: entry, meta: { source: "local-page" } })
  });
  return res.json();
}

// load.js——把数据全部读回
async function load() {
  const res = await fetch("https://formlm.me/api/v3/share/YOUR_TOKEN/query?page=1&size=100");
  return res.json();
}

有了这两个函数,一个纯 HTML 文件就成了小型应用:数据活得比浏览器久、跨机器同步、随时可导出可分析。如果页面是 AI Agent 写的,把接口的 ?help 文档递给它,让它自己把这些调用接好——AI Agent 指南演示了这个模式。

本地页面接云端存储免不了一个警示:接口 token 在页面源码里可见,请把数据当作半公开对待——日志、打卡器、原型都没问题;机密不行。任何拿到 token 的人都能向该表单提交(若开启 query,还能读取)。

常见问题

本地 HTML 文件能存数据吗?

能——往云端 API POST 就行。localStorage 只按浏览器留存,文件一挪或浏览器配置一清就没了。像 FormLM Data API 这种开启 CORS 的接口能接收来自 file:// 页面的 fetch 调用,所以你的本地文件可以把数据存到网上。

file:// 页面能用 fetch 吗?

能,前提是远端接口允许跨源请求。FormLM 的 Data API 会为 POST 和 GET 发送必要的 CORS 头,所以从磁盘直接打开的页面也能提交和读取数据。没开 CORS 的接口会被浏览器的同源规则拦下。

localStorage 用在这里有什么问题?

localStorage 绑定浏览器、绑定配置、绑定机器:数据随配置一起死。它不能跨设备同步、不能被其他工具读取、没有查询也没有导出。托管接口给你同样的易用性,外加真正的持久化与 HTTP 读路径。

能把数据读回本地页面吗?

能。query 接口把存储记录以 JSON 返回,本地页面可以 fetch 并渲染——让一个纯 HTML 文件变成读写都有云端持久化的小应用。

本地运行的 AI 生成应用也能用吗?

能——这是常见模式。AI Agent 写一个跑在你磁盘上的页面;你给它一个 FormLM 接口去 POST;应用就获得了持久化存储,全程没有部署这一步。Agent 甚至能自己去读接口的 ?help 文档。

相关指南

你的本地页面值得拥有记忆

免费接口、file:// 可用的 CORS、活得比标签页久的数据。

创建你的免费接口 →