离线天气预报应用的核心是静态数据+本地存储+前端逻辑闭环：预置JSON格式城市天气数据、用localStorage缓存用户偏好、纯前端实现时间切换与单位转换、Service Worker预缓存资源并添加版本号管理。
构建离线天气预报应用的关键不是实时拉取网络数据，而是提前打包可离线使用的天气数据，并用 JavaScript 本地调度、渲染和交互。核心思路是：静态数据 + 本地存储 + 前端逻辑闭环。
选择并预置离线天气数据
无法联网时，API 调用失效，所以必须内置一份结构清晰、覆盖常用城市的基础天气数据。推荐用 JSON 格式组织，例如：
- 按城市拼音首字母分文件（如
beijing.json、shanghai.json），便于按需加载 - 每份数据包含 7 天预报：日期、天气图标代码、最高/最低温、湿度、风向风力
- 图标用 Unicode 符号（☀️?️☁️）或本地 SVG，避免依赖外部 CDN
- 把数据放在
/data/目录下，构建时随 HTML 一起打包（Vite 或 Webpack 都支持静态资源导入）
用 localStorage 缓存用户偏好与最近查询
即使完全离线，也能记住用户上次选的城市、温度单位（℃/℉）、是否开启夜间模式等。操作示例：
- 首次访问时，自动写入默认城市（如北京）到
localStorage.setItem('lastCity', 'beijing') - 切换城市后立即保存：
localStorage.setItem('lastCity', 'guangzhou') - 读取时加异常处理：
try { city = JSON.parse(localStorage.getItem('lastCity')) || 'beijing'; } catch(e) { city = 'beijing'; }
纯前端实现“动态”天气展示
没有后端，就靠 JS 模拟时间流转与状态更新：
立即学习“Java免费学习笔记（深入）”；
- 用
new Date()获取当前小时，结合预置数据中的“白天/夜间”字段，自动切换图标和背景色 - 温度单位切换不发请求，只改 DOM 文本和缓存标记：
localStorage.setItem('unit', 'f') - 添加简易动画：用 CSS transition 实现温度数字渐变，用 requestAnimationFrame 控制卡片淡入
- 搜索框支持本地模糊匹配——遍历所有城市名数组，用
includes()或正则快速过滤
增强离线体验的细节优化
让用户感觉“它真的能用”，而不仅是“没报错”：
- 页面加载时检测
navigator.onLine，离线状态下隐藏“刷新”按钮，显示提示语“当前为离线模式，使用内置数据” - Service Worker 预缓存 HTML、CSS、JS 和 /data/ 下所有 JSON，确保二次打开秒开
- 为每个城市数据加版本号字段（如
"version": "202405"），方便未来通过更新包升级数据 - 提供“导出当前数据”按钮，生成一个 JSON 文件供用户备份或分享
不复杂但容易忽略：离线应用的价值不在功能多全，而在关键路径（查天气 → 看温度 → 切城市）全程无空白、无报错、有反馈。
