前端学习:浏览器缓存方式有哪些(cookie、localstorage、sessionstorage)

11 篇文章 2 订阅
6 篇文章 2 订阅

浏览器缓存有哪些


浏览器缓存的问题在后台项目中会经常出现,本期文章会总体介绍 浏览器缓存的几种方式通常缓存的方式 。👇👇👇

浏览器缓存方式概要
http缓存基于HTTP协议的浏览器文件级缓存机制
websql只有较新的chrome浏览器支持,并以一个独立规范形式出现
indexDB一个为了能够在客户端存储可观数量的结构化数据,并且在这些数据上使用索引进行高性能检索的 API
Cookie一般网站为了辨别用户身份、进行 session跟踪储存在用户本地终端上的数据通常经过加密
Localstoragehtml5的一种新的本地缓存方案(目前用的比较多),一般用来存储ajax返回的数据,加快下次页面打开时的渲染速度,浏览器关闭不会全部删除
Sessionstorage和localstorage类似,但是浏览器关闭则会全部删除,api和localstorage相同(实际项目中使用较少
application cache将大部分图片资源、js、css等静态资源放在manifest文件配置中
cacheStorage在ServiceWorker的规范中定义的,可以保存每个serverWorker申明的cache对象
flash缓存(基本不用) 主要基于flash有读写浏览器端本地目录的功能

ps:通常缓存已高亮,后续会围绕这三种通常缓存方法不定期更新~

觉得这篇文章有用的小伙伴们

可以点赞➕收藏➕关注哦~🔥🔥🔥

  • 3
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
localStorage, sessionStorage, 和 cookie 都用于在客户端存储数据,但它们有以下几个主要区别: 1. **数据生命周期**[^2]: - Cookie: 数据在设置的过期时间之前一直有效,即使关闭浏览器也会保留,除非特别设置为会话Cookie。 - sessionStorage: 仅在当前浏览器会话期间有效,即当浏览器窗口关闭时数据会被清除。 - localStorage: 数据永久有效,直到用户手动清除或浏览器清理缓存。 2. **数据传输**[^1]: - Cookie: 数据在浏览器和服务器间往返。 - sessionStoragelocalStorage: 不直接发送到服务器,仅在本地存储。 3. **存储大小和路径**: - Cookie: 通常有4k的大小限制,并且可以通过路径属性指定数据的范围。 - sessionStoragelocalStorage: 较大的存储空间(通常5M或更大),没有路径限制。 4. **跨域共享**: - Cookie: 在同源策略下共享,即同一个协议、域名和端口。 - sessionStoragelocalStorage: 仅在同源窗口内共享,即使在不同的标签页也共享。 5. **事件通知**: - Web Storage (localStoragesessionStorage): 支持事件通知,可以监听数据的变化。 在实际使用中,选择哪种存储方式取决于数据的生命周期、隐私需求以及是否需要跨页面或跨会话共享。例如,如果需要跨会话保持数据,可以选择localStorage;如果数据不需要持久化且需要跨页面共享,sessionStorage是个好选择;而cookie适合短期存储少量信息,如用户首选项。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Dorable_Wander

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值