收藏不看JavaScript前端开发那些事儿

浏览器原理-浏览器缓存和本地存储篇

2021-06-13  本文已影响0人  林一一呢

原文地址

浏览器原理-浏览器缓存和本地存储篇

github

大家好,我是林一一,这是一篇关于浏览器 缓存原理 和 本地存储 的文章,后续回持续推出关于,浏览器原理的文章。

一、浏览器的缓存篇

思维导图

思维导图.png

所谓浏览器的缓存,就是浏览器通过 HTTP 请求网络资源后将资源留在本地的一种行为。在页面上点击 返回和前进的按钮 就是利用浏览器的缓存。

浏览器请求资源过程

先本地再服务器(先强缓存再协商缓存)

简单的说浏览器的缓存请求分为有无 HTTP 请求两种。

强缓存

所谓的强缓存是我们没有发送 HTTP 请求,而是直接从本地缓存中获取资源的一种行为。成功后返回状态码 200。

Expires

http1.0 中一个页面的缓存字段,是一个格林时间。这个时间是浏览器强缓存资源失效的时间

Expires: Wed, 22 Nov 2021 08:41:00 GMT

上面的表示缓存的资源会在 2021年11月22号8点41分 过期。

Cache-Control

强缓存.jpg

HTTP1.1 中页面的缓存字段。 如果 Expires和Cache-Control 都存在,那么Cache-Control的优先级更高。

Cache-Control: max-age = 3600

表示距离上次请求的一小时内可以直接使用本地的缓存。不需要再次请求。

协商缓存

所谓协商缓存是指:浏览器携带缓存的标识 tag向服务器发送请求,服务器更具携带过来的标识判断是否使用缓存的这个过程就是 协商缓存

Etag / If-None-Match

Etag.jpg
etag: W/"5357d2b3f63545926812b95658505315"

Last-Modified/If-Modified-Since

Last-Modified: Wed, 23 Nov 2021 08:41:00 GMT

缓存位置

浏览器缓存位置.jpg

上面提到过缓存的位置 Service Worker, Memory Cache, Disk Cache, Push CacheService Worker 优先级最高到 Push Cache

二、浏览器的本地缓存篇

浏览器的本地缓存主要分为 5 种,localStorage, sessionStorage, cookie, WebSql, indexedDB

cookie

cookie 是服务器生成的,保存到浏览器的一个本地文件中。前端可以通过 Set-Cookie 设置 cookie,前端可以设置多个 Set-Cookie

Set-Cookie: BDSVRTM=7; path=/
Set-Cookie: H_PS_PSSID=34130_34099_33969_31253_33848_33607_26350; path=/; domain=.baidu.com

localStorage

localStorage 存值的方式和 cookie 类似,都会存放在同一个域名下,localStorage 可以长期存储,没有时间的限制。可以通过localStorage.setItem()/getItem() 存取值。

sessionStorage

sessionStorage 和 localStorage 一致,唯一大的区别在于 sessionStorage 是会话级别的存储

indexedDB

浏览器提供的非关系型数据库,indexedDB 提供大量的接口提供查询功能,还能建立查询。

webSQL

已废弃,旨在通过 js 语句操控 sql 语句完成对数据的读写。

参考

《图解HTTP》

浏览器缓存

前端缓存

本地存储

上一篇下一篇

猜你喜欢

热点阅读