http缓存
http缓存基本认识
http缓存分为强缓存
和协商缓存
1、浏览器在加载资源时,先根据这个资源的一些http header判断它是否命中强缓存,强缓存如果命中,浏览器直接
从自己的缓存中读取资源
,不会
发请求到服务器。比如某个css文件,如果浏览器在加载它所在的网页时,这个css文件的缓存配置命中了强缓存
,浏览器就直接从缓存
中加载这个css,连请求都不会发送到网页所在服务器。
2、当强缓存没有命中
的时候,浏览器一定
会发送一个请求到服务器,通过服务器端依据资源的另外一些http header验证这个资源是否命中协商缓存
,如果协商缓存命中,服务器会将这个请求返回,但是不会返回这个资源的数据,而是告诉客户端可以直接从缓存中加载这个资源
,于是浏览器就又会从自己的缓存中去加载这个资源。
强缓存与协商缓存的共同点是:如果命中
,都是从客户端缓存中加载资源
,而不是从服务器加载资源数据;区别是:强缓存不发请求到服务器,协商缓存会发请求到服务器
。
当协商缓存
也没有命中
的时候,浏览器直接从服务器
加载资源数据。
前端缓存
localStorage 和sessionStorage的相同点
localStorage
和sessionStorage
这两个都是用于存储客户端数据的。 也被称为前端缓存
或webStorage
。- localStorage和sessionStorage的存储大小都是5M。
- localStorage和sessionStorage都只能存储字符串类型数据。
localStorage 和sessionStorage的区别
是否可以跨页面通讯
1)sessionStorage
使用sessionStorage缓存的数据不可进行跨页面通讯,因为sessionStorage的生命周期是基于浏览器页面的。
注意: 不过同一个页面下嵌套的iframe属于同源。同页面下的iframe之间可以进行通讯。
2)localStorage
使用localStorage缓存的数据可以进行跨页面通讯。一个窗口存储的数据在另一个窗口可以拿到。
localStorage👇
是否会随着浏览器关闭而清除
- sessionStorgae存储的数据在页面被关闭以后会自动被清除不会保留。
- localStorage存储的数据除非我们手动清除,否则一直存在。
localStorage和sessionStorage的应用场景
最常用的就是登录信息了。localStorage的话比较适合长期有效的自动登录。
sessionStorage比较适用于短期有效的自动登录(比如token过期重新请求)。
注意:在适用sessionStorage和localStorage的时候,存储的敏感数据(比如账号密码)最好都加密一下。
在浏览器的“应用程序”里是可以看到的↓
cookie
cookie存储量较小最多4kb已经很少使用
sessionStorgae和localStorage的使用方式
sessionStorage
存储
sessionStorage.setItem("key","val");
读取
sessionStorage.getItem("key","val");
删除指定键
sessionStorage.removeItem("key","val");
删除全部
sessionStorage.clear();
localStorage
存储
localStorage.setItem("key","val");
读取
localStorage.getItem("key","val");
删除指定键
localStorage.removeItem("key","val");
删除全部
localStorage.clear();
结论
- localStorage可以跨页面通讯。sessionStorage不可以跨页面通讯
- localStorage不会随着页面关闭而被清除,他只能手动清除。
- sessionStorage会随着页面的关闭而清除。
- localStorage和sessionStorage的存储大小都是5M。