localStorage 的使用场景:减少重复 API 调用的缓存策略

冷炫風刃

冷炫風刃

2026-07-30

203人浏览

原创

localstorage适合缓存变化频率低、实时性要求不高的数据,如用户基础信息(token、id等,有效期≤7天)、系统配置、静态字典和小时级更新的仪表盘数据;动态内容须实时请求;应带过期机制、捕获quotaexceedederror,并与内存缓存协同使用,注意跨标签页一致性及敏感信息规避。

localstorage 的使用场景:减少重复 api 调用的缓存策略

localStorage 适合用来缓存那些变化频率低、对实时性要求不高的数据,从而避免重复请求 API。它不是万能的“兜底缓存”,关键在于选对数据、设好时效、管住边界。

哪些数据值得放进 localStorage 缓存

缓存前先判断数据特性,避免缓存失效或误导用户:

  • 用户基础信息:登录态 token、用户 ID、昵称、头像地址(有效期建议 7 天以内)
  • 系统配置类:菜单权限、主题设置、语言偏好、应用开关项
  • 静态字典数据:省市区列表、订单状态枚举、商品分类树、币种/单位选项
  • 仪表盘聚合数据:日活统计、本周销售额、后台汇总指标(更新周期 ≥ 1 小时)

动态内容如聊天消息、未读通知、实时股价、购物车变动等,不适合用 localStorage 缓存——它们必须走实时请求,否则用户看到的就是过期信息。

搜狐资讯
搜狐资讯

AI资讯助手,追踪所有你关心的信息

下载

带过期机制的缓存写法(推荐)

直接用 localStorage.setItem 存原始值会永久驻留,容易堆积无效数据。应统一加时间戳和过期逻辑:

  • 每次写入时保存 { value, expires: Date.now() + ttl } 结构体
  • 读取时先校验 expires,过期则自动清除并返回 null
  • ttl 建议按场景设定:token 用 7 天(604800000ms),配置项用 24 小时(86400000ms),统计类用 1 小时(3600000ms)
  • 捕获 QuotaExceededError 异常,防止因存储满导致静默失败

与内存缓存配合使用效果更好

localStorage 是持久层,但读写有 IO 开销;内存缓存(如 Map 或全局对象)响应更快,适合高频访问的近期数据:

  • 首次请求后,同时写入内存缓存(短期)和 localStorage(长期)
  • 后续请求优先查内存,命中则秒回;未命中再查 localStorage,仍无则发网络请求
  • 页面刷新后内存清空,但 localStorage 保留,可快速恢复上一次缓存状态

注意跨标签页和多实例一致性

localStorage 是同源共享的,但不触发事件通知。多个标签页修改同一 key 时,彼此无法感知:

  • 可监听 storage 事件,在其他标签页更新缓存时同步清理本地内存副本
  • 对强一致性要求高的场景(如登出),需额外广播机制(BroadcastChannel 或自定义事件)
  • 避免在 localStorage 中缓存敏感字段(如完整手机号、身份证号),即使加密也需谨慎

大量免费API接口:立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游,为数据API应用能力赋能!

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

浏览器缓存

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
python是前端还是后端
python是前端还是后端

Python属于前端也属于后端,其灵活性和丰富的生态系统使得开发人员能够在不同的领域中灵活运用。本专题为大家提供python相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.11

1111

5

前端如何实现即时通讯
前端如何实现即时通讯

实现即时通讯的方法有WebSocket、Long Polling、Server-Sent Events、WebRTC等等。详细介绍:1、WebSocket,它可以在客户端和服务器之间建立持久连接,实现实时的双向通信,前端可以使用 WebSocket API来创建WebSocket连接,并通过发送和接收消息来实现即时通讯;2、Long Polling,是一种模拟实时通信的技术等等。

2023.10.09

2262

6

前端和后端的区别
前端和后端的区别

前端关注的是用户界面的设计和交互,而后端则注重数据处理和逻辑控制。想了解更多前端后端的相关内容,可以阅读本专题下面的文章。

2024.03.19

2132

13

php和前端的关联介绍
php和前端的关联介绍

php既可以作为前端语言,也可以作为后端语言。想了解更多php和前端的相关内容,可以阅读本专题下面的文章。

2024.03.22

2322

10

前端外包工作内容有哪些
前端外包工作内容有哪些

前端外包工作内容包括:1. 网站和应用程序开发;2. 用户界面和交互设计;3. 用户体验优化;4. 设计和视觉开发;5. 跨浏览器兼容性;6. 性能优化;7. 维护和更新;8. 项目管理和沟通。想了解更多前端的相关内容,可以阅读本专题下面的文章。

2024.05.22

336

5

json数据格式
json数据格式

JSON是一种轻量级的数据交换格式。本专题为大家带来json数据格式相关文章,帮助大家解决问题。

2023.08.07

1560

5

json是什么
json是什么

JSON是一种轻量级的数据交换格式,具有简洁、易读、跨平台和语言的特点,JSON数据是通过键值对的方式进行组织,其中键是字符串,值可以是字符串、数值、布尔值、数组、对象或者null,在Web开发、数据交换和配置文件等方面得到广泛应用。本专题为大家提供json相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.23

1425

1

jquery怎么操作json
jquery怎么操作json

操作的方法有:1、“$.parseJSON(jsonString)”2、“$.getJSON(url, data, success)”;3、“$.each(obj, callback)”;4、“$.ajax()”。更多jquery怎么操作json的详细内容,可以访问本专题下面的文章。

2023.10.13

588

3

go语言处理json数据方法
go语言处理json数据方法

本专题整合了go语言中处理json数据方法,阅读专题下面的文章了解更多详细内容。

2025.09.10

1315

7

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
燕十八nginx精品视频教程
燕十八nginx精品视频教程

共23课时 | 7.7万人学习