浏览器存储CookieCookie是HTTP协议的一种无状态协议。请求服务器时，HTTP请求需要携带cookie来验证用户身份。Cookie由服务器生成并存储在客户端以维护状态。通常一个cookie由以下值组成：名称（name）值（value）域（Domain）值（value）路径（Path）过期时间（Expiers/Max-Age）大小（Size）是否为HTTP请求（HttpOnly)安全（Secure）提示：域、路径、过期时间和安全是服务器给浏览器的指令，它们不会随请求发送给服务器，只发送名称和值对给服务器。cookie有一些限制。可以设置一个过期时间，但是如果不设置，它会和session处于同一层级，一旦关闭浏览器就会消失。Cookie有以下优点：过期时间可控，不会永久有效，有一定的安全保障。可跨域扩展和共享。通过加密和安全传输技术（SSL），可以降低cookie被破解的可能性。它具有很高的兼容性。缺点是：有一定的数量和长度限制，每个cookie的长度不能超过4KB，否则多余的部分会被剪掉。请求头上的数据容易受到拦截攻击。单个cookie的大小不超过4KB，很多浏览器限制一个站点最多存储20个cookie。webStorageH5可以将用户的浏览数据存储在本地。以前使用过Cookie，但webStorage更快更安全。可以在不影响网站性能的情况下存储大量数据，以键/值对的形式存在。WebStorage有两种类型：sessionStorage和localStorage。sessionStoragesessionStorage在session中存储数据，浏览器关闭后就会消失。它具有以下特点：-大小5Mb-数据不会在页面刷新时消失，它会在页面关闭时消失。-不能跨越页面（仅在当前页面上使用）。-使用window.open打开页面，更改location.href方法获取sessionStorage内部数据。主要用于以下场景：主要用于会话级小数据的存储。存储当前页面刷新时仍需存储，但关闭后不需要保留的一些信息。非常适合单页应用使用，可以用来存储登录状态信息等。localStoragelocalStorage会一直把数据存储在客户端本地。其API提供了以下方法来操作：setItem(key,value)——保存数据，以键值对的形式存储。getItem(key)——读取数据，传入键值(key)，得到对应的值(value)。removeItem(key)——删除某条数据，删除键值对。clear()——删除所有数据。key(index)–获取索引的键。以下是localStora的特点：-大小5Mb。-可以跨页。-永久保存，需要手动删除。-使用window.open打开页面，更改location.href方法获取sessionStorage内部数据。它通常用于以下场景：客户端数据的持久化存储，只能通过JavaScript删除或用户清除浏览器缓存时删除。如果是一些数据量稍大的，比如编辑器的自动保存等。多页面之间访问公共数据。sessionStorage只能用于一个标签，而localStorage可以在多个标签之间共享。浏览器缓存机制浏览器的缓存机制就是把访问过的资源缓存起来，这样客户端下次访问的时候可以直接访问缓存的资源，从而减少服务器的请求次数，让页面加载更快.判断是否访问缓存取决于各种HTTP头，例如：Expires：响应头，表示资源的过期时间。Cache-Control：请求头/响应头，是缓存控制字段。Etag(HTTP1.1)：响应头，是资源标识，由服务器保存。一旦资源被修改，Etag也会随之改变。lf-None-Match(HTTP1.1)：请求头，一般服务器会比较If-None-Match和请求资源的最新ETag。Last-Modified(HTTP1.0)：响应头，表示资源最后被修改的时间。If-Modified-Since(HTTP1.0)：请求头，资源最后一次被修改的时间（稍后详述）。这些标头共同构成了HTTP请求和响应，也支持浏览器缓存，但这种缓存方式是有缺陷的。首先，如果资源更新速度在秒级以下，那么这个缓存是不能用的。因为它的时间单位是最低的秒。其次，如果文件是服务器动态生成的，这个方法的更新时间永远是生成的时间。即使文件可能没有变化，也会自动更新，所以起不到缓存的作用。对于强缓存，服务器通常会通知浏览器一个缓存时间。这个信息在Cache-Control和Expires中，浏览器通过这个来判断缓存是否过期。如果时间还没到。直接从缓存中。这就是所谓的“强缓存”。在HTTP1.0中过期。使用Expires字段表示缓存的过期时间，即有效时间+当前服务器时间。但是这种方式的缺点是用户只需要修改客户端的本地时间，这样当客户端和服务端的时间不一致时，浏览器就会判断缓存失效，然后重新请求资源。Cache-controlCache-Control是HTTP协议中关于缓存的响应头，可以由以下值组成：max-age：用于设置缓存的最长期限。与Expires相反，它的时间是相对于请求的时间而言的。s-maxage：同max-age，仅用于共享缓存，如CDN缓存。public：响应可以被任何对象缓存，甚至是通常不可缓存的内容。private：缓存只能被单个用户缓存，不能作为共享缓存使用（即代理服务器不能缓存）。no-cache：可以在客户端进行缓存，但是每次都要去服务端检查新鲜度来决定是从服务端获取最新的资源（200）还是读取缓存（304），即,协商缓存。no-store：不允许在客户端存储，每次都向服务端请求新的资源。如果协商缓存未命中强缓存，即强缓存无效（可能是Cache-Control中设置了no-store或no-cache），则判断协商缓存。Last-Modified&If-Modified-Since(HTTP1.0)当第一次请求资源时，服务器会返回资源最后一次修改的时间。稍后再次请求时，服务器会比较If-Modified-Since和Last-Modified字段。如果两者相同，说明资源没有被修改，返回304状态码。如果两者不同，则表示资源已被修改，因此返回数据和一个200状态码（未发送请求）。但是，如果服务器更新资源的时间单位是秒，上述方法无法识别一秒内多次修改的情况。同时，如果资源更新速度小于1ms，则不可能产生新的最后修改时间。为了避免这种情况，HTTP1.1中出现了一组新字段：Etag和If-None-Match。Etag&If-None-Match(HTTP1.1)Etag是HTTP1.1的一个属性。它由服务器生成并以比Last-Modified更高的优先级返回给客户端。在HTTP1.1中，当浏览器第一次发起HTTP请求时，服务器返回一个Etag。当浏览器第二次发起同一个请求时，客户端会发送一个值为Etag的If-None-Match。服务器会将浏览器发送的Etag与服务器端的Etag进行比较，如果相同则将If-None-Match的值设置为false并返回304，表示使用了浏览器缓存。如果不是，服务器将If-None-Match的值设置为true，返回200和新数据。网页加载速度的加快，不仅仅是通过加快网速来实现的。在我们顺利访问的背后，浏览器的存储和缓存机制也功不可没。希望这篇文章能帮助大家增加对这个机制的理解。参考资料：深入理解浏览器的缓存机制https://www.jianshu.com/p/54c...一文理解前端缓存https://juejin.cn/post/684490...浏览器的存储和Caching机制https://blog.csdn.net/wanting...推荐阅读上网时404是什么意思。全站HTTPS就一定安全吗？
