h5页面实现本地缓存主要依赖浏览器提供的本地存储技术，包括localstorage、sessionstorage和indexeddb。1. localstorage用于长期保存静态数据，适合存储不常变化的信息如用户设置，最大存储约5mb，数据不会随页面关闭清除；2. sessionstorage用于临时缓存，生命周期仅限当前会话，适用于多步骤表单中的中间状态保存；3. indexeddb适用于复杂结构化数据的存储和查询，支持索引和增删改查操作，适合大量数据场景；4. 缓存策略建议根据数据时效性决定是否缓存，结合服务端做校验机制并定期清理老数据，从而在提升加载速度的同时避免数据过期或占用过多设备空间。
H5页面要实现本地缓存功能，其实主要靠的是浏览器提供的本地存储技术。这些技术能让我们把数据保存在用户设备上，下次打开页面时直接读取，减少请求、提升加载速度。常见的方案包括 localStorage、sessionStorage 和 IndexedDB。
下面从实际使用角度出发，分几个常用场景说说怎么用好这些技术。
1. 使用 localStorage 长期保存静态数据
localStorage 是最常用的本地缓存方式之一，适合用来存储一些不常变化的数据，比如用户设置、静态配置、历史记录等。
- 数据不会随页面关闭而清除，除非手动删除或调用 clear 方法。
- 存储上限一般为 5MB 左右（不同浏览器略有差异）。
- 只能存储字符串类型，如果需要存对象，记得先用 json.stringify 转换。
举个例子：
你做一个天气类 H5 页面，用户查过的城市可以缓存在 localStorage 里，下次打开直接显示最近查询的城市列表，不需要再请求服务器。
操作方法：
// 存储数据 localStorage.setItem('lastCity', '北京'); // 读取数据 const city = localStorage.getItem('lastCity'); // 删除数据 localStorage.removeItem('lastCity');
注意：不要用来存敏感信息，因为它是明文存储的。
2. 用 sessionStorage 做临时缓存
和 localStorage 类似，但它的生命周期只在当前会话中有效。一旦页面关闭，数据就会被清空。
适用场景：
- 表单填写过程中的中间状态
- 页面跳转之间传递数据
- 不想长期占用用户设备空间的情况
例如，你在做一个多步骤表单页，每一步填的内容可以暂存在 sessionStorage 里，最后提交后再统一处理。
操作方式也差不多：
sessionStorage.setItem('step1Data', 'xxx'); const data = sessionStorage.getItem('step1Data');
3. 复杂数据结构用 IndexedDB
如果缓存的数据比较复杂，比如有多个字段、需要索引、支持增删改查，那就要用到 IndexedDB。
它是一个浏览器内置的数据库系统，适合大量结构化数据的存储和查询，比如离线消息、文章内容、商品列表等。
虽然 API 看起来有点复杂，但可以用一些封装好的库来简化开发，比如 localForage 或者自己封装一个简单的工具函数。
简单流程如下：
- 创建数据库并打开连接
- 创建 objectStore（类似表）
- 添加/读取/更新/删除数据
这里就不贴完整代码了，有兴趣可以搜一下“indexeddb 入门示例”。重点是：当你的数据结构变复杂、量变大时，才考虑用它。
4. 缓存策略建议：别乱缓存，也别不缓存
很多人一开始要么不用缓存，页面慢；要么一股脑都缓存，结果数据旧了也不更新。所以建议：
- 对时效性要求高的数据，不缓存或设个过期时间（比如用时间戳判断）
- 对静态资源或低频变动数据，优先缓存
- 结合服务端接口，做缓存校验机制（如 ETag、Last-Modified）
- 清理老数据，避免无限增长
比如你可以这样设计：
每次请求数据前，先看本地有没有缓存，有的话再检查是否在有效期内。超过 5 分钟就重新拉取，否则继续用本地数据。
基本上就这些。H5 的本地缓存不是什么高深技术，但用好了能让用户体验明显提升。关键在于根据业务需求选择合适的存储方式，并做好数据管理和清理。
