本地存储不是垃圾桶，存进去的东西要能清掉

前端要存点东西，顺手就写了本地存储。半年后回头看，里面躺着旧版本的用户标识、过期的筛选条件、几段早已不用的缓存。页面还是能用，只是偶尔有人反馈“看到的还是老内容”。

几种容器各管什么

Cookie 会随请求发送，适合放会话标识；本地存储容量大、长期保存、读写同步；会话存储随标签页关闭清空；索引式数据库适合结构化的大量数据；缓存存储配合离线访问。选错容器，后面要么性能吃亏，要么清不干净。

同步读写会卡

本地存储的读写是同步的，数据量大时主线程会停顿。把几百条记录塞进去再整体读取，首屏就能感觉到卡。适合放的是少量配置，不是整份列表。

敏感信息不要落在前端

令牌、证件号码、完整联系方式，都不该长期存在浏览器里。前端存储对同源脚本完全可见，一次脚本注入就能全部读走。需要长期保存的，放服务端，前端只拿短期凭证。

要有版本和过期

存储键带上版本号，结构变更时按版本清理旧数据。给每条记录加时间戳，读取时判断是否过期，别指望用户自己去清缓存。版本号不加，改版后新旧结构混用，报错会很难查。

该清的时候要清

用户退出登录、撤回同意、注销账号，对应的本地数据要一并删除。只在服务端删、浏览器里还留一份，等于没删。这类清理要写进流程，不能靠开发记得。

缓存与发布

静态资源带指纹，发布后自然失效；接口数据加短周期缓存，避免用户看到旧内容。改版期间最容易出现新旧数据混用，发布顺序要提前排：先上接口兼容层，再切前端。

怎么自测

用无痕窗口打开，看功能是否正常；手动清空存储，看是否报错；换一个浏览器，看降级是否合理。三种情况都过一遍，剩下的问题基本是边界条件。

容量与配额

不同浏览器给的配额不一样，写满之后会抛错。写入要判断结果，别默认成功。重要数据在写入失败时要有降级路径，比如退回会话存储或直接请求服务端。

小结

本地存储是工具，不是仓库。选对容器、控制体积、加上版本、写清清理、留好降级，五件事做到，改版时才不会翻出一堆历史包袱。冉冉科技在做站点前端交付时，会把存储键的命名与清理规则写进交付说明。

关于冉冉科技

江苏冉冉信息科技有限公司（品牌“冉冉科技”）成立于2017年，位于江苏省常州市新北区，是一家从事互联网信息服务、电子商务应用与企业应用系统开发的技术服务企业。公司业务涵盖网站建设、网页设计、SEO优化、竞价包年、域名注册、虚拟主机、企业邮箱、整合营销及企业形象策划等，以“只做有效果的网络营销”为服务主张，累计完成三千余起网站建设与服务。