浏览器存储包括了 Cookies、Local Storage、Session Storage、IndexedDB、WebSQL 这 5 种形式的本地存储。
Cookie 的本职工作并非本地存储，而是“维持状态”。 因为HTTP协议是无状态的，HTTP协议自身不对请求和响应之间的通信状态进行保存。Cookie 是用来绕开HTTP的无状态性的“额外手段”之一。
Cookie的生成方式主要有两种：
通过响应头里的 Set-Cookie 指定要存储的 Cookie 值在 js 中通过 document.cookie 可以读写 Cookie，以键值对的形式展示Cookie 的特点：
Cookie 的大小限制在 4KB 左右，此外很多浏览器对一个站点的 Cookie 个数也是有限制由于请求会携带 Cookie，故过多的 Cookie 会带来巨大的性能浪费Cookie 与安全： 关于Cookie 的 SameSite 属性，可参见阮一峰老师的这篇文章，以及作者在实际项目中遇到的关于SameSite 的问题。
HTML5 中新增了本地存储的解决方案----Web Storage，它分成两类：sessionStorage和localStorage。这样有了WebStorage后，cookie能只做它应该做的事情了——作为客户端与服务器交互的通道，保持客户端状态。
Session Storage 的特点：
会话级别的浏览器存储，当会话结束（通常是该窗口关闭），数据被清空大小为5M左右仅在客户端使用，不和服务端进行通信Local Storage 的特点：
保存的数据长期存在，下一次访问该网站的时候，网页可以直接读取以前保存的数据。大小为5M左右仅在客户端使用，不和服务端进行通信Session Storage、Local Storage 的区别：
【作用域】：Local Storage 只要求同源，就能读取/修改到同一份 Local Storage 数据。Session Storage，除了要求同源外，还要求在同一窗口（也就是浏览器的标签页）【生命周期】：Local Storage 是持久化的本地存储，存储在其中的数据是永远不会过期的，使其消失的唯一办法是手动删除；而 Session Storage 是临时性的本地存储，它是会话级别的存储，当会话结束（页面被关闭）时，存储内容也随之被释放。Session Storage、Local Storage 的使用方式类似：
sessionStorage.setItem('key', 'value'); sessionStorage.getItem('key'); sessionStorage.removeItem('key'); sessionStorage.clear(); localStorage.setItem('myCat', 'Tom'); localStorage.getItem('myCat'); localStorage.removeItem('myCat'); localStorage.clear();随着浏览器的功能不断增强，越来越多的网站开始考虑，将大量数据储存在客户端，这样可以减少从服务器获取数据，直接从本地获取数据。 现有的浏览器数据储存方案，都不适合储存大量数据：Cookie 的大小不超过4KB，且每次请求都会发送回服务器；LocalStorage 在 2.5MB 到 10MB 之间（各家浏览器不同），而且不提供搜索功能，不能建立自定义的索引。所以，需要一种新的解决方案，这就是 IndexedDB 诞生的背景。
IndexedDB 就是浏览器提供的本地数据库，它可以被网页脚本创建和操作。IndexedDB 允许储存大量数据，提供查找接口，还能建立索引。这些都是 LocalStorage 所不具备的。就数据库类型而言，IndexedDB 不属于关系型数据库（不支持 SQL 查询语句），更接近 NoSQL 数据库。 具体使用可参考浏览器数据库 IndexedDB 入门教程、MDN
Web SQL是前端的数据库，它也是本地存储的一种，使用 SQLite 实现，SQLite 是一种轻量级数据库，它占的空间小，支持创建表，插入、修改、删除表格数据
W3C 推荐标准中将 WebSQL 废弃
