JavaScript无法直接访问MySQL等服务端数据库，浏览器中“本地数据库”实为IndexedDB、localStorage或Cache API等客户端存储方案；Ajax负责网络请求，离线缓存需结合这些机制实现先查本地、未命中再请求并存入的策略。
JavaScript 本身无法直接访问本地传统数据库（如 MySQL、PostgreSQL），也不支持在浏览器中直接连接服务端数据库。所谓“本地数据库”，在离线 Web 应用中实际指的是浏览器内置的客户端存储方案，比如 IndexedDB、localStorage 或 Cache API。Ajax（即 fetch 或 XMLHttpRequest）负责网络请求，而离线缓存查询则需配合这些客户端存储机制来实现——先查本地，未命中再发 Ajax 请求，并把结果存入本地供后续离线使用。
用 IndexedDB 做结构化离线缓存
IndexedDB 是浏览器原生支持的、异步、事务型、可存储大量结构化数据的本地数据库，适合缓存 API 响应（如用户列表、商品信息等）。
- 创建数据库并定义 object store（类似表），例如
cache_store，以 URL 为 keyPath 存储响应数据和时间戳 - 查询时先用
get(url)检查是否存在且未过期；若存在，直接返回解析后的数据 - 若未命中或已过期，则用
fetch(url)发起 Ajax 请求，成功后将{data, timestamp, expires}写入 IndexedDB - 建议封装一个
cachedFetch(url, options = {ttl: 60000})方法统一处理逻辑
用 localStorage 简单缓存 JSON 数据
适合轻量、低频、无需复杂查询的场景（如配置项、用户偏好）。注意它只能存字符串，且容量小（通常 5–10 MB）、同步阻塞、无过期机制。
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
- 读取：用
localStorage.getItem(key)获取字符串，再JSON.parse() - 写入：拼接过期时间，例如
JSON.stringify({value, expires: Date.now() + 5 * 60 * 1000}) - 每次读取前检查
expires，过期则忽略并触发重新请求 - 不推荐缓存大体积或频繁更新的数据，容易阻塞主线程
结合 Cache API 实现 HTTP 层缓存（Service Worker）
Cache API 与 Service Worker 配合，可在请求拦截阶段自动缓存 GET 请求，是 PWA 离线能力的核心。
立即学习“Java免费学习笔记（深入）”；
- 注册 Service Worker 后，在
install阶段预缓存静态资源；在fetch事件中判断是否命中缓存 - 对 API 接口缓存，可监听匹配
/api/的请求，优先event.respondWith(caches.match(...))，未命中再fetch(...).then(r => caches.open(...).put(...)) - 注意：Cache API 缓存的是
Response对象，需用response.clone().json()才能读取数据；不能像 IndexedDB 那样按字段查询 - 适合“请求即缓存”模式，但动态更新（如带 token 或用户 ID 的请求）需手动管理 cache key
关键注意事项
离线缓存不是简单“存一次就完事”，需考虑一致性、时效性与用户体验。
- 缓存穿透：避免无效 key 频繁击穿本地缓存去请求网络，可用布隆过滤器（前端简易版可用 Set 记录已知有效 key）或默认空值缓存
-
缓存更新策略：GET 查询建议用 TTL（如 5 分钟）；POST/PUT/DELETE 操作后，应主动
delete相关缓存项（如修改用户信息后删掉/api/user/123缓存） - 错误降级：网络失败时，优先返回过期缓存（带提示“数据可能不是最新的”），而不是空白页
-
存储配额与清理：IndexedDB 和 Cache API 都有配额限制，长期运行应用应定期清理过期项，或监听
storage事件做优雅降级
