JavaScript 中 LocalStorage 怎么在天气预报应用中缓存上一次查询的城市天气数据-js教程-PHP中文网

应缓存结构化天气数据及时间戳，查完即存、启动先取、超时降级；存键用前缀如"weather_cache_beijing"，读取时校验有效性并捕获异常，切换城市时覆盖写入或清理旧缓存。

javascript 中 localstorage 怎么在天气预报应用中缓存上一次查询的城市天气数据

在天气预报应用中，用 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);
  }
}