前端存储方式比较

在浏览器中的存储方式有以下几种：

• cookie
• localStorage
• sessionStorage
• indexDB

这几种存储方式使用在不同的场景里，相互之间也有很多的区别。

cookie

Cookie是服务器发送到用户浏览器并保存在本地的一小块数据。cookie一般由后端设置，并通过response流发送给前端并设置过期时间。

在过期之前，cookie会一直存储在浏览器中，并且每次发送http请求时都会携带在http请求头中。

cookie的限制：

• 存储空间只有4k
• 存储时间有限
• 存储在cookie中的数据在每次发送请求的时候都会将它带上，使得每次请求的数据都会无意义的增大

localStorage

localStorage生命周期是永久的，所以除非用户自己手动清除，否则就会一直存储在用户的浏览器中。

localStotage以键值对（Key-Value）的形式存储数据，可以存储数组、数字、对象等可以被序列化为字符串的数据。

sessionStorage

sessionStorage操作的方法与localStorage是一样的，区别在于sessionStorage在页面关闭后数据就会被清除，而localStorage则会一直保存。

刷新页面的时候sessionStorage不会被清除，但是打开同域新页面的时候不会访问到数据。

indexDB

indexDB是一种使用浏览器存储大量数据的方法，它创造的数据可以被查询，并且可以离线使用。有以下几个特性：

• 它是一个对象仓库，存储的都是js对象
• 所有的操作都是异步的，都是请求—响应模式
• 所有的数据操作都是基于事务的
• 同源限制
• 存储空间大，无限制
• 支持二进制存储

几种存储方式之间的区别

1、cookie只有4k，远小于其他几种方式，indexDB最大

2、cookie参与与服务器通信，而其他几种方式不参与

3、cookie的声明周期一般由服务器决定，超过时间则被清除；localStorage除非手动清除，否则一直存在；sessionStorage是页面被关闭就会被清除；indexDB也是只能通过手动操作才能被清除

4、cookie需要注意安全性

Service Worker

Service Worker是运行在浏览器背后的独立线程，可以理解为一个介于客户端和服务器之间的一个代理服务器。在Service Worker一般做以下操作：拦截客户端的请求、向客户端发送消息、向服务器发起请求，但最主要的用途之一是离线缓存资源。

Service Worker实现缓存功能一般分为三个步骤：注册Service Worker，监听install事件，缓存需要的文件。在下次用户访问的时候会拦截请求的方式查询是否存在缓存，如果存在就在缓存中读取缓存文件，如果不存在就会发起请求，然后在读取数据。