用纯html+js实现可增删改的收货地址列表，需基于localstorage持久化存储地址数组，每次加载时json解析读取并增量渲染dom；新增生成时间戳id，编辑复用input元素并设editingid标识，提交前event.preventdefault()阻断刷新，校验失败返回false；设为默认地址时全局置false再单设true，并同步更新localstorage。
纯静态 HTML 无法持久保存地址，必须搭配 JavaScript 操作 DOM 才能实现“看起来能用”的管理界面。核心是把地址数据存在 localStorage 里，每次加载时读取并渲染，所有增删改都同步更新这个存储。
常见错误是直接用 document.write 或反复 innerHTML = ... 全量重写列表——这会丢失已输入的表单焦点、清空未提交的编辑状态。正确做法是：用 appendChild / removeChild 增量操作，编辑时复用已有 <input> 元素。
{ id: 'addr_1', name: '张三', phone: '138****1234', address: '北京市朝阳区xxx' }
id（如 'addr_' + Date.now()），避免重复text 改成“更新”，同时存一个临时 editingId 变量editingId：有则找对应项替换，没有则 push 新地址form 提交就完事因为没有后端接收，<form></form> 默认提交会刷新页面，刚填的地址全丢。必须调用 event.preventDefault() 阻止默认行为。
另一个坑是表单校验写在 submit 事件里却没 return false —— 即使弹了 alert，只要没阻止默认行为，页面照样刷新。更稳妥的是：校验失败时直接 return false，成功才执行后续逻辑。
/^1[3-9]\d{9}$/.test(phone)
alert 中断流程，改用 <span class="error"></span> 内联提示required 属性只是基础，JS 校验才是实际生效的环节localStorage 存地址要注意哪些细节localStorage 只能存字符串，直接 localStorage.setItem('addresses', addresses) 会存成 [object Object],[object Object]。必须用 JSON.stringify() 序列化，读取时用 JSON.parse() 还原。
容易被忽略的是：JSON.parse() 可能抛错（比如用户手动清空了 localStorage 里的值，或存了非法 JSON）。必须包在 try...catch 里，出错就回退到空数组。
let addresses = [];
try {
const saved = localStorage.getItem('addresses');
if (saved) addresses = JSON.parse(saved);
} catch (e) {
console.warn('地址数据解析失败，使用空列表');
}
localStorage.setItem('addresses', JSON.stringify(addresses))，别攒着等页面卸载再存（beforeunload 不可靠）localStorage 可能被禁用，需降级处理（例如 fallback 到内存变量）所谓“默认”，其实是给某条地址加个 isDefault: true 字段，并确保整个数组里最多只有一个 true。每次点“设为默认”时，先遍历把所有地址的 isDefault 设为 false，再把当前地址设为 true，最后存回 localStorage。
渲染列表时，用 address.isDefault 控制是否显示“（默认）”标签和高亮样式；提交新地址时，默认 isDefault 设为 false，除非用户勾选了“设为默认”复选框。
data-id="addr_123" 携带目标 ID，避免依赖 DOM 顺序isDefault 状态，除非用户主动修改localStorage 的读写闭环、DOM 增量更新、表单防刷新这三件事做稳，后面扩展才有基础。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
