localstorage可实现商品足迹列表，每次进入商品页存id、title、price、imgurl和时间戳，读取时解析、去重、倒序排列；用splice(0,0,item)置顶新项更优；img加载失败需onerror兜底；框架中需手动同步storage变化。
如何用 localStorage 实现商品足迹列表
浏览器端记录用户最近浏览的商品，localStorage 是最轻量、最直接的方案。它不依赖后端，适合「临时留存、跨页面共享、无登录场景」下的足迹展示。
关键点在于：每次进入商品页时，把 id、title、price、imgUrl 和时间戳存进数组，再用 JSON.stringify() 写入 localStorage；读取时反向解析，去重并按时间倒序排列。
- 避免直接 push 后覆盖整个数组——先
JSON.parse()取出原数组，用filter()剔除重复id，再unshift()新项（保证最新在前） - 单条数据建议限制字段数，不要塞
description或完整 HTML 片段，否则容易超 5MB 上限 - 注意 Safari 无痕模式下
localStorage会抛QuotaExceededError，需用try/catch包裹写入逻辑
为什么用 Array.splice(0, 0, item) 比 push 更合适
足迹列表要求「最新浏览排第一」，不是简单追加。如果每次都 push()，就得额外调用 reverse()，既多一次遍历，又改变原数组顺序逻辑。
unshift() 看似合理，但它在数组头部插入会触发所有后续元素索引位移，性能差；而 splice(0, 0, item) 语义清晰、V8 引擎优化充分，实测在 50 条以内数据时差异可忽略，且更易配合去重逻辑使用。
- 去重 + 置顶常用组合写法：
const history = JSON.parse(localStorage.getItem('goodsHistory') || '[]');<br>const index = history.findIndex(i => i.id === newItem.id);<br>if (index > -1) history.splice(index, 1);<br>history.splice(0, 0, newItem);<br>localStorage.setItem('goodsHistory', JSON.stringify(history)); - 不要用
sort()动态排序——每次渲染都重排，浪费 CPU，且时间戳精度若只到秒，可能造成顺序错乱
渲染足迹列表时 img 标签加载失败怎么处理
足迹里的 imgUrl 很可能是第三方图床链接，或商品下架后 URL 失效，直接渲染会导致大量 404 和空白占位。
- 给
<img>加onerror回调，动态切换为默认图：@@##@@
- 更稳妥的做法是在存入足迹前就做兜底：服务端返回的图片地址为空或无效时，前端主动替换为统一占位图 URL，避免把坏链接存进
localStorage - 不要在渲染时用
fetch()预检图片是否存在——阻塞列表渲染，且并发请求易被限流
Vue/React 里如何响应式更新足迹列表
原生 JS 直接操作 DOM 更新足迹列表没问题，但框架项目中必须走响应式机制，否则视图不会自动刷新。
- Vue 2 中，
localStorage变更不会触发watch，需手动this.$forceUpdate()或用computed封装读取逻辑 - Vue 3 的
ref/reactive同样无法监听localStorage，推荐封装一个useGoodsHistory()组合式函数，内部用watchEffect+onMounted主动读取并更新 ref - React 中不要在
useEffect里只依赖空数组去初始化足迹——得监听storage事件，捕获其他标签页写入的变化：window.addEventListener('storage', e => {<br> if (e.key === 'goodsHistory') loadHistory();<br>});
本地存储本身没监听能力，跨标签页同步、服务端持久化、用户登录后合并历史——这些都不是 localStorage 能解决的，别在初期就预设它要承担太多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
