浏览器存储方式对比

Cookie

1.因为HTTP请求无状态，所以需要Cookie去维持客户端状态。
2.浏览器客户端记录保存Cookie,服务端辨别用户的信息。
3.Cookie的生成方式：http response header 中的set-cookie，由服务端生成，客户端把Cookie存储和维护。
4.JS中可以通过document.cookie来读写cookie。
5…之后的请求都携带Cookie,就像健身房办卡，维护会员的信息。
作用：
1.用于浏览器和服务器的交互。
2.客户端自身数据的存储。
Cookie初衷是为了维护客户端的状态
存储的限制：大小4KB，需要设置过期时间。
Cookie的存储能力被localstorage代替
httponly为了保证安全，不支持JS读写，防止黑客攻击。
Cookie在相关域名下面会带来CDN的流量损耗，因为只要是这个域名下的信息都会携带cookie
对于静态资源来说，每次都在HTTP头部中携带Cookie信息，对大流量来说经济损失很大
解决：CDN的域名和主站的域名要分开

Localstorage

1.接口封装好
2.浏览器的本地缓存方案
3.大小在5Mz左右
4.仅在客户端存在，不和服务端交互
5.场景：网速慢，本地缓存，在网不好的情况下，第一次请求来的信息我会保存，把首屏上的不变的信息存下来，不会有首屏的白屏情况，后期有接口返回的新数据，再重新渲染，提升首屏渲染速度。

Sessionstorage

1.大小为5M左右
2.会话级别的浏览器存储
3.接口封装好
4.对于表单信息的维护，将表单信息存储，关闭之后是空的，下一步那种，可以存储。
5可以存储数组、数字、对象等可以被序列化为字符串的内容，不通信，仅存储

IndexedDB

1.在客户端存储大量结构化数据，使用索引来实现对数据库的高性能搜索。
2.为应用创建离线版本。

区别

sessionStorage操作的方法与localStroage是一样的，区别在于 sessionStorage 在关闭页面后即被清空，而 localStorage 则会一直保存。很多时候数据只需要在用户浏览一组页面期间使用，关闭窗口后数据就可以丢弃了，这种情况使用sessionStorage就比较方便。

注意，刷新页面sessionStorage不会清除，但是打开同域新页面访问不到。

1.cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。
2. 存储大小限制不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
3.数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；
localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；
cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。
4.作用域不同，sessionStorage不在不同的浏览器页面中共享，即使是同一个页面；
localStorage 在所有同源窗口中都是共享的；
cookie也是在所有同源窗口中都是共享的。
Web Storage 支持事件通知机制，可以将数据更新的通知发送给监听者。
Web Storage 的 api 接口使用更方便，cookie的原生接口不友好，需要自己封装。
5. 安全性
需要注意的是，不是什么数据都适合放在 Cookie、localStorage 和 sessionStorage 中的，因为它们保存在本地容易被篡改，使用它们的时候，需要时刻注意是否有代码存在 XSS 注入的风险。所以千万不要用它们存储系统中的敏感数据。

Service Workers

1.JS是单线程的，JS与UI渲染是互斥的，优化就要调用SW
2.避免主线程的阻塞，3D模型很大
3.做离线化，与主页面通信
SW是由事件驱动的,具有生命周期，可以拦截处理页面的所有网络请求(fetch)，可以访问cache和indexDB，支持推送，并且可以让开发者自己控制管理缓存的内容以及版本，为离线弱网环境下的 web 的运行提供了可能，让 web 在体验上更加贴近 native。
换句话说他可以把你应用里的所有静态动态资源根据不同策略缓存起来，在你下次打开时不再需要去服务器请求，这样一来就减少了网络耗时，使得web应用可以秒开，并且在离线环境下也变得可用。做到这一切你只需要增加一个sw文件，不会对原有的代码产生任何侵入，是不是很perfect？

Service Worker基本特征

• 无法操作DOM
  只能使用HTTPS以及localhost
  可以拦截全站请求从而控制你的应用
  与主线程独立不会被阻塞（不要再应用加载时注册sw）
  完全异步，无法使用XHR和localStorage
  一旦被 install，就永远存在，除非被 uninstall或者dev模式手动删除
  独立上下文
  响应推送
  后台同步