前端的储存方式
存储类：
Web存储 （Web Storage）：HTML 5 中提出的存储方式，容量有 5 M。
localStorage sessionStorage
Cookie：浏览器普遍支持的基于 HTTP 协议的存储方式，但容量只有 4 KB
数据库存储： IndexDB Web SQL
缓存类：
Cache Storage: 在 Service Worker 的规范中提出，一般配合 Service Worker 进行离线缓存。Application Cache： 在 HTML5.1提出的缓存方式，可用来构建离线应用。
cookie的一些小秘密
Cookie基于HTTP规范，用来识别用户。 互联网早期浏览器是没有状态维护，这个就导致一个问题就是服务器不知道浏览器的状态，无法判断是否是同一个浏览器。这样用户登录、购物车功能都无法实现，Lou Montulli在1994年引入到web中最终纳入W3C规范 RFC6265中。
浏览器在本地按照一定规则存储一些文本字符串，每当浏览器像服务器发送请求时带这些字符串。服务器根据>字符串判定浏览器的状态比如：登录、订单、皮肤。服务器就可以根据不同的cookie识别出不同的用户信 息。。
Cookie 的构成：
名称（Name）值（Value）域（Domain）路径（Path）失效时间 （Expiers/Max-Age）大小（Size）是否为 HTTP请求（HttpOnly）安全性（Secure）
提示：域、路径、失效时间和安全性都是服务器给浏览器的指示，它们不会随着请求发送给服务器，发送给服务器的只有名称与值对。
Cookie 的限制性：
如果设定了 Cookie 的过期时间，那么 Cookie 会在到期时自动失效。如果没有设定过期时间，那么 Cookie 就是 session 级别的，即浏览器关闭时 Cookie 自动消失。
Cookie 的优缺点：
优点：
可以控制过期时间，不会永久有效，有一定的安全保障。可进行扩展，可跨域共享。通过加密与安全传输技术 （SSL） ，可以减少 Cookie 被破解的可能性。有较高的兼容性。
缺点：
有一定的数量与长度限制，每个 Cookie 长度不能超过 4 KB ，否则超出部分会被截掉。请求头上的数据容易被拦截攻击。
cookie是如何产生的：
在浏览器访问服务器时由服务器返回一个Set-Cookie响应头，当浏览器解析这个响应头时设置cookie 2. 通过浏览器js脚本设置document.cookie = 'name=monsterooo';
浏览器访问服务器携带cookie过程
创建cookie
/**
* 'name', cookie命名
* 'value'，cookie的值
* {
* expires: 7, // cookie有效期，单位天；默认值：会话cookie，关闭浏览器cookie失效。
* path: '/', // cookie影响到的路径；值为'/'，表示设置cookie在整个域中可用；默认值：创建cookie的页面路径。
* domain: 'example.com', // 定义cookie有效的域。默认值：创建cookie的页面域。
* secure: false, // 定义cookie安全性，默认值：false，设置为true，则cookie在http中是无效的，cookie的传输需要使用安全协议（https）。
* }
*/
$.cookie('name', 'value', { expires: 7, path: '/', domain: 'example.com', secure: false});
读取cookie
$.cookie('name'); //name存在返回对应value,不存在返回null
删除cookie
//成功删除cookie时返回true，否则返回false
$.removeCookie('name'); // => true
$.removeCookie('nothing'); // => false
注意：删除cookie时，必须传递用于设置cookie的完全相同的路径，域和安全选项，除非您依赖于默认选项。
即：设置cookie时如果设置了path属性或secure属性，删除的时候要带着这些属性，否则无法成功删除cookie。
// This won't work!
$.removeCookie('name'); // => false
// This will work!
$.removeCookie('name', { path: '/' }); // => true
Web Storage（localStorage和sessionStorage）
出现原因：
克服 Cookie 的一些限制，同时存储一些需要严格控制在客户端，不需要发送给服务器的一些数据。提供了除 Cookie 之外的另一种存储会话的途径。提供了一种大容量存储空间来跨回话存储数据的途径。
它们都是直接作为 window对象的属性存在的，我们可以直接通过 window.localStorage 与 window.sessionStorage 来访问。
注： Web Storage 只能储存字符串，如果用 Web Storage 存储对象，会出现 [Object Object], 可以用 JSON.stringify 与 JSON.parse方法来解决这个问题。
Web Storage 实例方法:
clear：删除所有值getItem(name): 根据传入的键来获取对应的值。key(index): 获得所对应索引的键，名称。removeItem(name): 删除键对应的键值对setItem(name, value): 为指定的 name 设置一个对应的值。
sessionStorage:
同源策略： 不同于 Cookie， sessionStorage 访问限制更高，只有当前设定了 sessionStorage 的域下才能访问。单标签页： 两个相同域下的标签页不能互通。在关闭标签页或者新开的标签页下都不能访问之前写下的 sessionStorage, 刷新标签页依然可以访问 sessionStorage。
使用场景：
主要针对会话级的小数据的存储。存储一些在当前页面刷新仍然需要存储，但是关闭后不需要留下的信息。很适合单页应用的使用，可以用来存储登录态信息等。
localStorage：
同源策略：和 sessionStorage 一样，要访问同一个 localStorage 页面必须来自同一个域名，同种协议，同种端口。localStorage 设定后，刷新或者重新打开标签页，关闭浏览器重新打开原来的标签页也可以访问到。
使用的场景：
持久性的保存客户端数据，只能通过 JavaScript 删除或者用户清除浏览器缓存。如果有一些稍大量的数据，例如编辑器的自动保存等。多页面间访问共同数据。 sessionStorage 只能用于一个标签页，而localStorage可以在多个标签页之间共享。
sessionStorage 与 localStorage 的区别:
生命周期：localStorage 是本地存储，没有期限，只能用户自己操作来删除。 sessionStroage 是会话存储，页面关闭数据就会丢失。sessionStorage 有单标签页的限制，localStorage则没有。
Storage 事件：
我们对 Storage 对象进行任何的操作，都会在文档上触发 Storage 事件， 这个事件的 event 对象有以下属性：
domain：发生变化的存储空间的域名。key：设置或删除的键名newValue： 如果是设置值，则是新值。如果是删除键，则为null。oldValue：键被更改之前的值。
IndexDB 与 Web SQL
特点：
访问：indexDB 和 Web SQL 和 Web Storage 一样，均是只能在创建数据库的域名下才能访问。存储时间：存储时间为永久，除非用户清除数据，他可用作长期的存储。大小限制：二者其实没有强制限制。只是 indexDB 在数据超过 50 M 之后会从浏览器弹出一个框让你确认。性能： indexDB 查询速度会相对较慢，而 Web SQL 的性能相对较快。IndexDB 特点：它的数据保存在对象存储空间中。创建对象存储空间，首先先定义一个键，之后添加数据。可以使用游标查询。
Cache Storage和Application Cache
Cache Storage：
Cache Storage 是用来存储 Response 对象 ，也就是对 HTTP 响应进行缓存。 Cache Storage 是多个 cache 的集合，每个 cache 可以存储多个响应对象。它基于 Promise。
Application Cache：
它是 HTML5 中新引入的应用程序换粗技术，它的出现意味着 web 应用可以通过缓存，在没有网络的环境下运行，构建离线应用。
优点:
离线浏览
提升页面的载入速度
降低服务器的压力