怎么通过HTML5中LocalStorage实现网页版天气预报的城市收藏列表持久化-H5教程-PHP中文网

用localstorage实现城市收藏列表持久化，核心是将城市名存为数组，增删时同步写入并更新ui，页面加载时读取渲染。初始化读取json.parse(localstorage.getitem('weather_favorites')) || []，添加前检查重复，删除用filter，清空可removeitem。

怎么通过html5中localstorage实现网页版天气预报的城市收藏列表持久化

用 localStorage 实现城市收藏列表的持久化，核心是把用户选中的城市存成数组（或对象），每次增删都同步写入浏览器本地存储，页面加载时再读取渲染。

1. 收藏城市数据结构设计

推荐用数组存储城市名称（如 ["北京", "上海", "广州"]），简洁直观、易于增删查。避免用对象键名做城市名（如 {"北京": true}），因为遍历时需额外处理键名，且无法保证顺序。

初始化时先尝试读取已有数据：

let favoriteCities = JSON.parse(localStorage.getItem('weather_favorites')) || [];

2. 添加城市到收藏列表

用户点击“收藏”按钮时，检查是否已存在，避免重复；然后更新数组并写入 localStorage：

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

判断城市是否已在数组中：!favoriteCities.includes(cityName)
添加后调用 localStorage.setItem('weather_favorites', JSON.stringify(favoriteCities))
建议同时触发 UI 更新（如刷新收藏列表 DOM）

3. 删除和清空收藏

删除单个城市：用 filter() 创建新数组，再保存；清空则直接赋空数组并保存：

// 删除北京
favoriteCities = favoriteCities.filter(city => city !== '北京');
localStorage.setItem('weather_favorites', JSON.stringify(favoriteCities));

// 清空全部
localStorage.removeItem('weather_favorites'); // 或设为空数组

注意：调用 removeItem 后，下次读取会得到 null，所以初始化逻辑里用 || [] 仍可兜底。