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

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

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

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


相关文章
|
2月前
|
存储 缓存 安全
第二章 HTTP请求方法、状态码详解与缓存机制解析
第二章 HTTP请求方法、状态码详解与缓存机制解析
|
2月前
|
缓存 安全 Java
7张图带你轻松理解Java 线程安全,java缓存机制面试
7张图带你轻松理解Java 线程安全,java缓存机制面试
|
12天前
|
缓存 应用服务中间件 Apache
缓存代理服务器的实现机制和技术选型
缓存代理服务器是一种特殊的代理服务器,其主要功能是缓存从目标服务器(通常是Web服务器)获取的数据,并在客户端再次请求相同数据时直接提供缓存的数据。通过缓存代理服务器可以加快访问速度并减轻目标服务器的负载。
|
13天前
|
JavaScript 前端开发 开发者
浏览器事件机制详解
浏览器事件机制详解
12 1
|
1月前
|
监控 前端开发 JavaScript
记录浏览器节能机制导致Websocket断连问题
近期,在使用WebSocket(WS)连接时遇到了频繁断连的问题,这种情况在单个用户上每天发生数百次。尽管利用了socket.io的自动重连机制能够在断连后迅速恢复连接,但这并不保证每一次重连都能成功接收WS消息。因此,我们进行了一些的排查和测试工作。
134 1
记录浏览器节能机制导致Websocket断连问题
|
26天前
|
缓存 调度
Eureka的注册表拉取及多级缓存机制简析
Eureka的注册表拉取及多级缓存机制简析
21 2
|
2月前
|
域名解析 存储 缓存
【域名解析DNS专栏】DNS缓存机制详解:如何提升域名解析速度
【5月更文挑战第21天】本文探讨了DNS缓存机制的原理及优化方法。DNS缓存是存储已解析域名与IP地址的临时数据库,能减少网络延迟,减轻服务器负担并提升用户体验。优化策略包括增加缓存容量,设置合理过期时间,使用智能DNS服务及定期清理缓存。文中还提供了一个Python示例,展示如何通过缓存提升域名解析速度。
【域名解析DNS专栏】DNS缓存机制详解:如何提升域名解析速度
|
13天前
|
存储 JavaScript 前端开发
在?聊聊浏览器事件循环机制
在?聊聊浏览器事件循环机制
14 0
|
17天前
|
SQL 缓存 Java
Java框架之MyBatis 07-动态SQL-缓存机制-逆向工程-分页插件
Java框架之MyBatis 07-动态SQL-缓存机制-逆向工程-分页插件
|
2月前
|
存储 缓存 运维
【Docker 专栏】Docker 镜像的分层存储与缓存机制
【5月更文挑战第8天】Docker 镜像采用分层存储,减少空间占用并提升构建效率。每个镜像由多个层组成,共享基础层(如 Ubuntu)和应用层。缓存机制加速构建和运行,通过检查已有层来避免重复操作。有效管理缓存,如清理无用缓存和控制大小,可优化性能。分层和缓存带来资源高效利用、快速构建和灵活管理,但也面临缓存失效和层管理挑战。理解这一机制对开发者和运维至关重要。
【Docker 专栏】Docker 镜像的分层存储与缓存机制