6、浏览器存储

多种浏览器存储方式并存，如何选择？

Cookie

特色：

• 由于HTTP请求无状态，因此须要cookie去维持客户端状态
• 过时时间 expire
• cookie的生成方式(1. http response header中的set-cookie,  2. js中能够经过document.cookie能够读写cookie)
• 仅仅做为浏览器存储（大小4KB左右，能力被localstorage替代）
• Cookie（是一个域名维度下的概念，只要是这个域名下的全部请求都会携带cookie，可是，是否是这个域名下面的全部请求都须要用cookie？这是不必定的，去请求静态资源的时候不须要，我只是去请求一个静态资源好比图片回来，可是也会带上去，可是这个cookie这个时候是没有用的。所以解决办法就是cdn的域名和主站的域名不同，将静态资源放在cdn里面）中在相关域名下面 —— cdn的流量损耗
• Httponly。不容许js读写。

Cookie用处：

• 一、用户浏览器和服务器端的交互，保存用户的状态，这就是cookie设计的初衷。Cookie能够经过健身房来比喻，第一次不带任何东西，办了会员给了一张卡，下次带着这个卡，就知道你是上回来过咱们这里的。
• 二、客户端自身数据的存储。做为浏览器存储，大小4kb，须要设置过时时间expire，可是做为浏览器存储的话过时时间就没有必要了，存储大小也过小了。

LocalStorage

• HTML5设计出来专门用于浏览器存储的，用来代替cookie存储的功能
• 大小为5M左右
• 仅在客户端使用，不和服务端进行通讯
• 接口封装较好
• 优化：浏览器本地缓存方案，提升某个网页首屏渲染的速度（进到某个页面，第一次去请求，将返回的数据存在localstorage缓存，第二次的时候就能够直接从本地缓存中查找了）

SessionStorage

• 会话级别的浏览器存储（浏览器中一个tab标签就是一个会话，这个tab中的数据只能在这个tab中使用，当这个tab关闭了，那么sessionStorage数据就清空了）
• 大小为5M左右
• 仅在客户端使用，不和服务端进行通讯
• 接口封装较好
• 优化：对于表单信息的维护（好比在一个表单中填写一些数据，当不当心刷新了，那么表单里面的数据都丢了，你须要从新填，若是能把你表单里面的数据实时的存在session里面，即便刷新了，数据还在。当关了这个tab,数据也是没了。还有一个场景就是将一个表单拆成多个，点击下一步下一步，当咱们后退的时候，当前的这个表单的数据仍是应该保存的）

IndexedDB

• IndexedDB 是一种低级API，用于客户端存储大量结构化数据。该API使用索引来实现对该数据的高性能搜索。虽然 Web Storage 对于存储较少许的数据颇有用，但对于存储更大量的结构化数据来讲，这种方法不太有用。IndexedDB提供了一个解决方案。
• 为应用建立离线版本

indexDB能够参考：http://www.ruanyifeng.com/blog/2018/07/indexeddb.html

indexDB没有表的概念，而是objectStore，是一个对象和一个key值相连。

PWA

PWA (Progressive Web Apps) 是一种 Web App 新模型，并非具体指某一种前沿的技术或者某一个单一的知识点，咱们从英文缩写来看就能看出来，这是一个渐进式的 Web App，是经过一系列新的 Web 特性，配合优秀的 UI 交互设计，逐步的加强 Web App 的用户体验。能够下载lighthouse ，进行PWA测试。

Service Worker

做用：

一、使用拦截和处理网络请求的能力，去实现一个离线应用。
二、使用Service Worker在后台运行同时能和页面通讯的能力，去实现大规模后台数据的处理

 

做用1demo：安装中实际上会等待一个promise去返回一个异步的状态，若是异步状态返回reject，就进入Error状态。若是返回成功，安装就成功了。就进入serviceWorker的激活状态，就能够正常的监听事件并发送相关消息。

demo：https://files.cnblogs.com/files/QianDingwei/deom.rar

下载下来后，npm install,而后node server.js，而后在浏览器中输入http://localhost:8080/index.html，就能够查看到了

Service Worker更详细参考：http://www.javashuo.com/article/p-oigsbyhn-mo.html

一、正确使用serviceWorker缓存会大幅度提高性能并节省带宽。

二、serviceworker能够经过fetch API 拦截请求，从而查看这个浏览器是否支持webp格式的图片，若是支持咱们就能够定制请求，向服务器发送请求webp图片，若是不支持就正常发送就好了，从而提升了性能。一些现代浏览器容许用户在设置中开启流量节省功能，若是启用此功能，浏览器会为每一个HTTP请求添加一个新的请求头，使用ServiceWorker能够进入fetch事件并决定是否返回网站的轻量级版本