浏览器缓存机制(三):本地存储

简介: 浏览器缓存机制(三):本地存储

网络异常,图片无法展示
|

Cookie

  • Cookie 在同域下会伴随着每一次资源请求的请求报头传递到服务端进行验证:避免无效资源传输及性能浪费。
  • Cookie 无法跨域携带:将 CDN 的域名与主站区分开来来避免传输cookie带来的性能浪费。
  • 存储空间很小,不能超过 4KB
  • js-cookie库:优化原生cookie api

使用:

服务端登录接口可以在返回前端的响应报头中设置首部字段 set-cookie 来将 token 信息植入浏览器 cookie 中,set-cookie 指令值包含了必选项 <cookie-name>=<cookie-value> 值和名的形式,同时还包括了可选项 Path(路径)、Domain(域名)、Max-Age(有效时间)等,以分号分隔。

服务端可以返回多个 set-cookie 指令来达到设置多个 cookie 的目的。最终我们可以在开发者工具 Application 面板中查看当前网页设置的 cookie 值。

之后前端调用任何同域下的接口时,浏览器会自动将网站的 cookie 值附加在请求头中传给后端进行校验,前端则不需要关心 token 的存取问题。

很多网站就用这种方式来存储登录状态,但是这种方式只适用于浏览器方式,小程序等就不适用了。

Web Storage

Web Storage 是 HTML5 推出的浏览器存储机制,其又可分为 Session StorageLocal Storage,两者相辅相成。

使用Web Storage 的缺点是,前端少不了一些繁碎的序列化与反序列化操作。

IndexedDB


相关文章
|
4月前
|
存储 缓存 前端开发
HTTP的缓存机制是什么?
HTTP的缓存机制是什么?
28 1
|
7月前
|
SQL 缓存 Java
Mybatis-plus缓存机制
MyBatis-Plus(简称MP)是一个基于MyBatis的增强工具,提供了更便捷的CRUD操作和其他功能。与MyBatis相比,MyBatis-Plus并没有引入自己的缓存机制,而是直接使用了MyBatis的缓存机制。 在MyBatis中,缓存分为一级缓存和二级缓存。 1. 一级缓存:一级缓存是SqlSession级别的缓存,它默认是开启的。当查询操作执行时,查询的结果会被缓存在SqlSession的内部数据结构中。如果后续再次执行相同的查询,MyBatis会先检查一级缓存中是否存在结果,如果存在则直接返回缓存的结果,而不会再次执行SQL语句。一级缓存的生命周期与SqlSession相同,
242 0
|
8月前
|
缓存 Java 数据库连接
深入浅出 MyBatis 的一级、二级缓存机制
深入浅出 MyBatis 的一级、二级缓存机制
146 0
|
7月前
|
存储 缓存 Java
【面试题精讲】Java包装类缓存机制
【面试题精讲】Java包装类缓存机制
|
4月前
|
存储 消息中间件 缓存
redis的缓存机制
redis的缓存机制
96 0
|
7天前
|
缓存 Linux
linux系统缓存机制
linux系统缓存机制
|
18天前
|
XML 缓存 Java
MyBatis二级缓存解密:深入探究缓存机制与应用场景
MyBatis二级缓存解密:深入探究缓存机制与应用场景
55 2
MyBatis二级缓存解密:深入探究缓存机制与应用场景
|
2月前
|
存储 缓存 算法
深入探究LRU缓存机制:优化内存利用与提升性能
深入探究LRU缓存机制:优化内存利用与提升性能
159 1
|
2月前
|
存储 缓存 Java
什么!?实战项目竟然撞到阿里面试的原题!???关于MyBatis Plus的缓存机制
什么!?实战项目竟然撞到阿里面试的原题!???关于MyBatis Plus的缓存机制
|
4月前
|
Shell Unix Linux
Linux 终端命令之文件浏览(3) less
Linux 终端命令之文件浏览(3) less
31 0
Linux 终端命令之文件浏览(3) less