浏览器缓存 cookie 、localstorage、SessionStorage、IndexedDB对比

Cookie

1、因为HTTP请求无状态，所以需要cookie去维持客户端状态

2、过期时间 expire

3、cookie的生成方式

​ （一） http response header中的set-cookie

​ （二） js中可以通过document.cookie可以读写cookie

4、仅仅作为浏览器存储（大小4KB左右，能力被localstorage替代）

5、cookie中在相关域名下面 —— cdn的流量损耗

6、httponly

LocalStorage

1、HTML5设计出来专门用于浏览器存储的

2、大小为5M左右

3、仅在客户端使用，不和服务端进行通信

4、接口封装较好

5、浏览器本地缓存方案

SessionStorage

1、会话级别的浏览器存储

2、大小为5M左右

3、仅在客户端使用，不和服务端进行通信

4、接口封装较好

5、对于表单信息的维护

IndexedDB

1、IndexedDB 是一种低级API，用于客户端存储大量结构化数据。该API使用索引来实现对该数据

的高性能搜索。虽然 Web Storage 对于存储较少量的数据很有用，但对于存储更大量的结构化数据

来说，这种方法不太有用。IndexedDB提供了一个解决方案。

2、为应用创建离线版本

PWA

PWA (Progressive Web Apps) 是一种 Web App 新模型，并不是具体指某一种前沿的技术或者某一

个单一的知识点，我们从英文缩写来看就能看出来，这是一个渐进式的 Web App，是通过一系列新

的 Web 特性，配合优秀的 UI 交互设计，逐步的增强 Web App 的用户体验。

1、可靠：在没有网络的环境中也能提供基本的页面访问，而不会出现“未连接到互联网”的页面。

2、快速：针对网页渲染及网络数据访问有较好优化。

3、融入（Engaging）：应用可以被增加到手机桌面，并且和普通应用一样有全屏、推送等特性。

4、lighthouse(下载地址)

​ https://lavas.baidu.com/doc-assets/lavas/vue/more/downloads/lighthouse_2.1.0_0.zip

Service Worker

Service Worker 是一个脚本，浏览器独立于当前网页，将其在后台运行,为实现一些不依赖页面或者

用户交互的特性打开了一扇大门。在未来这些特性将包括推送消息,背景后台同步， geofencing（地

理围栏定位），但它将推出的第一个首要特性，就是拦截和处理网络请求的能力，包括以编程方式

来管理被缓存的响应。