缓存是javascript的核心基础知识之一,主要可以分为:本地缓存、应用缓存和离线缓存。

本地缓存主要有cookie、localStorage和sessionStorage,三者均是浏览器提供的本地缓存,但它们的生命周期和缓存大小有所不同


  • cookie大小一般限制在4kb以下,而且cookie会随请求发送到后端,所以一般只将用户登录态或者权限验证放在cookie中,避免影响请求传输效率;localStorage和sessionStorage的大小一般均是在5mb以下,sessionStorage的生命周期是维持到页面窗口关闭,而localStorage存储在浏览器缓存中直到代码删除或者手动清除浏览器缓存,它们都不能跨域访问。

  • 应用缓存是项目本身的缓存,比如一个js对象缓存的数据,或者状态管理机制如vuex和redux等进行应用数据存储,它们在页面刷新就会丢失。

  • 离线缓存,就是应用在离线情况下也能快速访问的缓存资源,这里主要讲serviceWorker,大多数浏览器已经支持serviceWorker提供离线缓存。它主要用做请求代理和离线资源缓存,它根据自定义的缓存策略对资源进行缓存(比如静态资源缓存),当无网或者弱网情况下,拦截请求后可直接返回缓存的静态资源,而不是出现令人烦恼的无法访问。现在在大厂针对支持serviceWorker的浏览器基本都会有一套离线缓存方案,那么知道serviceWorker离线缓存在面试中不失为一个亮点。