应缓存结构化天气数据及时间戳，查完即存、启动先取、超时降级；存键用前缀如"weather_cache_Beijing"，读取时校验有效性并捕获异常，切换城市时覆盖写入或清理旧缓存。
在天气预报应用中，用 localStorage 缓存上一次查询的城市天气数据，核心是：查完就存、启动就取、过期可清。关键不在于“能不能存”，而在于“存什么、什么时候存、怎么安全读取”。
存哪些数据？别只存城市名
只存城市名（如 "Beijing"）意义不大——你真正需要的是完整响应结果，比如温度、湿度、天气图标等。推荐结构化存储：
- 用
JSON.stringify()把整个天气对象转成字符串再存 - 同时记录时间戳（
timestamp），方便后续判断是否过期 - 键名建议带前缀，比如
"weather_cache_Beijing"，避免和其他数据冲突
查询后立刻缓存，但加一层防错
调用天气 API 成功后，不是无脑写入，要检查数据有效性：
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
- 确保响应中有
main.temp、weather[0].main等关键字段 - 用
try...catch包裹localStorage.setItem()，防止配额超限或浏览器禁用导致报错 - 示例代码片段：
if (weatherData && weatherData.main && weatherData.weather) {
const cache = {
data: weatherData,
timestamp: Date.now(),
city: cityName
};
try {
localStorage.setItem(`weather_cache_${cityName}`, JSON.stringify(cache));
} catch (e) {
console.warn("缓存失败：", e);
}
}
页面加载时优先读缓存，但要有 fallback
用户打开页面，先尝试从 localStorage 拿数据，而不是直接发请求：
立即学习“Java免费学习笔记（深入）”；
- 用
localStorage.getItem("weather_cache_Beijing")获取字符串 - 用
JSON.parse()解析，捕获解析异常（比如缓存损坏） - 检查
timestamp是否在合理范围内（例如 30 分钟内），超时则忽略缓存，走网络请求 - 如果缓存有效，直接渲染；否则发起新请求，并在成功后更新缓存
注意跨城市切换和清理逻辑
用户换城市时，旧缓存不会自动失效，需主动管理：
- 每次新查询前，可选择清除之前所有
weather_cache_*键（用for循环遍历localStorage.key(i)判断） - 更轻量做法：只缓存当前城市，用固定键名如
"weather_cache_current"，覆盖写入即可 - 敏感场景（如隐私模式、用户手动清除）下，应接受缓存为空，并静默降级到网络请求
