HTML5无法直接访问服务器数据库，必须通过fetch等HTTP请求调用后端接口，由后端查询MySQL等数据库并返回数据；localStorage和indexedDB仅为浏览器本地存储，与服务端数据库无关。
HTML5 本身不能直接获取数据库中的数据——它没有内置的数据库连接能力，也不具备后端访问权限。
为什么 localStorage 或 indexedDB 不是“从服务器数据库取数据”
很多人误以为用 localStorage 或 indexedDB 就是在“读数据库”，其实它们只是浏览器本地存储机制，和你服务器上的 MySQL、PostgreSQL 完全无关。它们的数据来源只能是 JavaScript 主动写入，比如从接口拿到后再存进去。
-
indexedDB是客户端数据库，数据只存在用户本机，刷新页面也不会丢，但初始为空 -
localStorage只能存字符串，对象得先JSON.stringify()，取出来再JSON.parse() - 两者都受同源策略限制，无法跨域读写，也不能直连后端数据库
真正获取服务端数据库数据的唯一路径：发 HTTP 请求
必须通过前端发起请求（如 fetch），由后端接口（如 Node.js、PHP、Python Flask）去查数据库，再把结果返回给 HTML 页面。
- 前端不能绕过服务端直连数据库，这是安全底线，浏览器根本不允许
- 常见错误：在
.html文件里直接写mysql.connect(...)—— 这会报错，因为mysql是 Node.js 模块，浏览器不认识 - 正确流程是：
HTML→fetch('/api/users')→ 后端路由 → 查询数据库 →res.json(data)→ 前端接收并渲染
如果想“假装”前端操作数据库：用 mock 数据快速验证逻辑
开发阶段没后端时，可用静态 JSON 模拟接口响应，避免卡在等待联调上。
立即学习“前端免费学习笔记（深入）”；
- 建个
data.json文件放在服务器根目录或public/下 - 用
fetch('/data.json')拿到数据，结构跟真实 API 保持一致 - 注意：mock 不能替代真实接口，尤其涉及权限、分页、事务时，行为差异很大
- 别把 mock 数据硬编码进 JS，否则上线容易忘记删，导致页面永远不走真实接口
真正的难点从来不在“怎么写 fetch”，而在于后端是否提供了稳定、带鉴权、有错误处理的接口；以及前端是否对空数据、网络失败、字段缺失做了防御性处理——这些细节比语法更影响上线体验。
