原文链接：https://juejin.im/post/6844904194680291342

http缓存

http缓存用于客户端储存一些不经常变化的静态文件（图片、css、js等）。分为强制缓存和协商缓存。

http缓存过程

请求 => 是否命中强缓存 => 是否命中协商缓存 => 获取资源
http缓存流程图

1.强制缓存

缓存规则

浏览器在请求某一资源时，会先获取该资源缓存的header信息，判断是否命中强缓存（cache-control和expires信息），若命中直接从缓存中获取资源信息，包括缓存header信息，本次请求就不会与服务器进行通信。
缓存方案

Expires：response header里的过期时间，浏览器再次加载资源时，如果在这个过期时间内，则命中强缓存。

Cache-Control：当值设为max-age=300时，则代表在这个请求正确返回时间（浏览器也会记录下来）的5分钟内再次加载资源，就会命中强缓存。

Cache-Control与Expires的作用一致，都是指明当前资源的有效期，控制浏览器是否直接从浏览器缓存取数据还是重新发请求到服务器取数据。只不过Cache-Control的选择更多，设置更细致，如果同时设置的话，其优先级高于Expires

cache-control除了该字段外，还有下面几个比较常用的设置值：
值可以是public、private、no-cache、no- store、no-transform、must-revalidate、proxy-revalidate、max-age 各个消息中的指令含义如下：
- Public指示响应可被任何缓存区缓存。
- Private指示对于单个用户的整个或部分响应消息，不能被共享缓存处理。这允许服务器仅仅描述当用户的部分响应消息，此响应消息对于其他用户的请求无效。
- no-cache指示请求或响应消息不能缓存
- no-store用于防止重要的信息被无意的发布。在请求消息中发送将使得请求和响应消息都不使用缓存。
- max-age指示客户机可以接收生存期不大于指定时间（以秒为单位）的响应。
- min-fresh指示客户机可以接收响应时间小于当前时间加上指定时间的响应。
- max-stale指示客户机可以接收超出超时期间的响应消息。如果指定max-stale消息的值，那么客户机可以接收超出超时期指定值之内的响应消息。

2.协商缓存

缓存规则

如果没有命中强缓存，浏览器会发送请求到服务器，请求会携带第一次返回的有关缓存的header字段信息（Last-Modifued/If-Modified-Since和Etag/If-None-Match），由服务器根据header信息来比对结果是否协商缓存命中。若命中，则服务器返回新的响应header信息更新缓存中的对应header信息，但是不返回资源内容，它会告知浏览器可以直接从缓存获取；否则返回最新的资源内容。
缓存方案

Last-Modify/If-Modify-Since：浏览器第一次请求一个资源的时候，服务器返回的header中会加上Last-Modify，Last-modify是一个时间标识该资源的最后修改时间；当浏览器再次请求该资源时，request的请求头中会包含If-Modify-Since，该值为缓存之前返回的Last-Modify。服务器收到If-Modify-Since后，根据资源的最后修改时间判断是否命中缓存

Etag/If-None-Match：web服务器响应请求时，告诉浏览器当前资源在服务器的唯一标识(etag)（生成规则由服务器决定）。当资源过期时（使用Cache-Control标识的max-age），发现资源具有Etag声明，则再次向web服务器请求时带上头If-None-Match （Etag的值）。web服务器收到请求后发现有头If-None-Match 则与被请求资源的相应校验串进行比对，决定是否命中协商缓存；

本地缓存

1、cookie

1.兼容所有的浏览器
2.有存储的大小限制，一般一个源（一个域下）只能存储4KB内容
3.cookie有过期时间(当然我们自己可以手动设置这个时间)
4.杀毒软件或者浏览器的垃圾清理都可能会把cookie信息强制清除掉
5.在隐私或者无痕浏览模式下，是不记录cookie的
6.cookie不是严格的本地存储，因为要和服务器之间来回传输

2、localStorage

1.不兼容IE8及以下-
2.也有存储的大小限制，一个源下最多只能存储5MB左右
3.本地永久存储，只要你不手动删除，永远存储在本地（但是我们可以基于API removeItem/clear手动清除一些自己想要删除的信息）
4.杀毒软件或者浏览器的垃圾清理暂时不会清除localStorage（新版本谷歌浏览器会清除localStorage等信息）
5.在隐私或者无痕浏览模式下，是记录localStorage的
6.localStorage和服务器没有半毛钱关系

3、sessionStorage

sessionStorage 和localStorage 唯一的区别在于sessionStorage 是临时存储，只对当前回话有效，当浏览器当前标签页关闭则失效，与localStorage 拥有同样的方法。

localStorageh和sessionStorage 都只拥有大约5M的存储空间，不适用于存储大数据量数据。对于数据量较大的数据缓存，我们应该应用本地数据库实现（indexDB）

4、indexDB

IndexedDB 具有以下特点。

（1）键值对储存。

IndexedDB 内部采用对象仓库（object store）存放数据。所有类型的数据都可以直接存入，包括 JavaScript 对象。对象仓库中，数据以"键值对"的形式保存，每一个数据记录都有对应的主键，主键是独一无二的，不能有重复，否则会抛出一个错误。
（2）异步。

IndexedDB 操作时不会锁死浏览器，用户依然可以进行其他操作，这与 LocalStorage 形成对比，后者的操作是同步的。异步设计是为了防止大量数据的读写，拖慢网页的表现。
（3）支持事务。

IndexedDB 支持事务（transaction），这意味着一系列操作步骤之中，只要有一步失败，整个事务就都取消，数据库回滚到事务发生之前的状态，不存在只改写一部分数据的情况。
（4）同源限制

IndexedDB 受到同源限制，每一个数据库对应创建它的域名。网页只能访问自身域名下的数据库，而不能访问跨域的数据库。
（5）储存空间大

IndexedDB 的储存空间比 LocalStorage 大得多，一般来说不少于 250MB，甚至没有上限。
（6）支持二进制储存。

IndexedDB 不仅可以储存字符串，还可以储存二进制数据（ArrayBuffer 对象和 Blob 对象）。

客户端缓存（http缓存和本地缓存）相关推荐

java 项目做多级缓存_【开源项目系列】如何基于 Spring Cache 实现多级缓存（同时整合本地缓存 Ehcache 和分布式缓存 Redis）...
一.缓存当系统的并发量上来了,如果我们频繁地去访问数据库,那么会使数据库的压力不断增大,在高峰时甚至可以出现数据库崩溃的现象.所以一般我们会使用缓存来解决这个数据库并发访问问题,用户访问进来,会先从 ...
构建本地缓存java_Java8简单的本地缓存实现
这里我将会给大家演示用ConcurrentHashMap类和lambda表达式实现一个本地缓存.因为Map有一个新的方法,在key为Null的时候自动计算一个新的value值.非常适合实现cache. ...
java 缓存_Java8简单的本地缓存实现
原文链接译文链接翻译:踏雁寻花,校对:丁一这里我将会给大家演示用ConcurrentHashMap类和lambda表达式实现一个本地缓存.因为Map有一个新的方法,在key为Null的时候自动计 ...
java 自动过期缓存_Java自动过期本地缓存简单实现
实际项目中常常需要用到本地缓存,特别是一些固定不变的数据,不想频繁调接口,因为http请求本身需要耗时,下面几个类对本地缓存作了简单实现,支持自动过期功能 LocalCache.javainterfa ...
html5本地缓存如何提交,HTML5: 本地缓存
HTML5 提供了两种在client存储数据的新对象: localStorage:没有时间限制的数据存储,在同一个浏览器中,仅仅要没被手动清理,第二天.第二周或下一年之后,数据依旧可用. sessio ...
php缓存远程图片接口,Android_Android远程获取图片并本地缓存，对于客户端——服务器端应用 - phpStudy...
Android远程获取图片并本地缓存对于客户端--服务器端应用,从远程获取图片算是经常要用的一个功能,而图片资源往往会消耗比较大的流量,对应用来说,如果处理不好这个问题,那会让用户很崩溃,不知不觉手 ...
本地缓存、分布式缓存以及多级缓存
像MySql等传统的关系型数据库已经不能适用于所有的业务场景,比如电商系统的秒杀场景,APP首页的访问流量高峰场景,很容易造成关系型数据库的瘫痪,随着缓存技术的出现很好的解决了这个问题. 一.缓存的概 ...
高并发技巧-redis和本地缓存使用技巧
在这篇文章中,我主要介绍的是分布式缓存和本地缓存的使用技巧,包括缓存种类介绍,各种的使用场景,以及如何使用,最后再给出实战案例. 众所周知,缓存最主要的目的就是加速访问,缓解数据库压力.最常用的缓存就 ...
缓存基础----本地缓存、分布式缓存以及多级缓存
目录一.缓存的概念(什么是缓存) 二.为什么要用缓存(为什么要用redis作为缓存) 三.缓存的分类有哪些 1.本地缓存 2.分布式缓存 3.多级缓存像MySql等传统的关系型数据库已经不能适用于 ...
php缓存数据到本地缓存,本地缓存localStorage的使用方法
本篇文章的使用方法来自于实际开发,详细介绍AppCan手机框架本地缓存localStorage的使用方法. 在手机应用中,存储本地数据是必不可少的功能,例如我们可以在手机中存储用户自定义设置.传递数据 ...

客户端缓存（http缓存和本地缓存）

原文链接：https://juejin.im/post/6844904194680291342

http缓存

本地缓存

客户端缓存（http缓存和本地缓存）相关推荐

最新文章

热门文章