cookie用来保存客户浏览器请求服务器页面的请求信息
HTML5的WebStorage提供了两种API：localStorage（本地存储）和sessionStorage（会话存储）
WebStorage的目的是克服由cookie所带来的一些限制，当数据需要被严格控制在客户端时，不需要持续的将数据发回服务器
三者的共同点都是保存在浏览器端，且同源
下面是他们之间的区别
生命周期
cookie：可以通过expires设置失效时间，不设置默认关闭浏览器即失效
localStorage：除非手动清除，否则永久保存
sessionStorage：仅在当前会话时候生效，关闭页面即失效
存储大小
cookie:4KB左右
localStorage、sessionStorage:可以保存5M的信息
HTTP请求
cookie:每次都会携带在http头中，过多使用cookie会带来性能问题
localStorage、sessionStorage:仅在客户端（即浏览器）中保存，不参与和服务器的通信
易用性
cookie:需要程序员自己封装，源生的Cookie接口不友好
localStorage、sessionStorage：源生接口可以接受，亦可再次封装来对Object和Array有更好的支持
应用场景
cookie：适合识别用户登录
localStorage和sessionStorage唯一的差别一个是永久保存在浏览器里面，一个是关闭网页就清除了信息
localStorage：可以用来跨页面传递参数
sessionStorage：用来保存临时数据，防止用户刷新页面之后丢失参数
使用方式
cookie使用方式 移步 https://www.cnblogs.com/theblogs/p/10617515.html
localStorage和sessionStorage所使用的方法是一样的
设置本地存储
localStorage.setItem('user','小明');
获取本地存储
localStorage.getItem('user');
删除本地存储
localStorage.removeItem('user');
清除本地存储
localStorage.clear();
以sessionStorage为栗子
var name='sessionData';
var num=120;
sessionStorage.setItem(name,num);//存储数据
sessionStorage.setItem('value2',119);
let dataAll=sessionStorage.valueOf();//获取全部数据
console.log(dataAll,'获取全部数据');
var dataSession=sessionStorage.getItem(name);//获取指定键名数据
var dataSession2=sessionStorage.sessionData;//sessionStorage是js对象，也可以使用key的方式来获取值
console.log(dataSession,dataSession2,'获取指定键名数据');
sessionStorage.removeItem(name); //删除指定键名数据
console.log(dataAll,'获取全部数据1');
sessionStorage.clear();//清空缓存数据：localStorage.clear();
console.log(dataAll,'获取全部数据2');
参考：https://juejin.im/post/5a191c47f265da43111fe859