相同点：都存储在客户端
不同点：
（1）存储大小
· cookie数据大小不能超过4k。
· sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
（2）有效时间
· localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；
· sessionStorage 数据在当前浏览器窗口关闭后自动删除。
· cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭
（3）数据与服务器之间的交互方式
· cookie的数据会自动的传递到服务器，服务器端也可以写cookie到客户端
· sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。
获取cookie的值
//获取cookie字符串
var strCookie= document.cookie;
//将多cookie切割为多个名/值对
var arrCookie= strCookie.split("; ");
var userId;
//遍历cookie数组，处理每个cookie对
for (var i= 0; i< arrCookie.length; i++) {
var arr= arrCookie[i].split("=");
//找到名称为userId的cookie，并返回它的值
if ("userId"== arr[0]) {
this.userId= arr[1];
break;
}
}
sessionStorag
（简单的说就存储在浏览器页面会话中，页面关闭则消失）
sessionStorage的特点是，当用户打开一个标签页，实际上就是建立了一个session会话，在这个标签页里，url发生跳转，sessionStorage实际上还是保存着，并不会消失，当标签页关闭的时候，数据才会消失。
sessionStorage 属性允许你访问一个 session Storage 对象。它与 localStorage 相似，不同之处在于 localStorage 里面存储的数据没有过期时间设置，而存储在 sessionStorage 里面的数据在页面会话结束时会被清除。页面会话在浏览器打开期间一直保持，并且重新加载或恢复页面仍会保持原来的页面会话。
localStorage
localStorage的优势
1、localStorage拓展了cookie的4K限制
2、localStorage会可以将第一次请求的数据直接存储到本地，这个相当于一个5M大小的针对于前端页面的数据库，相比于cookie可以节约带宽，但是这个却是只有在高版本的浏览器中才支持的
localStorage的局限
1、浏览器的大小不统一，并且在IE8以上的IE版本才支持localStorage这个属性
2、目前所有的浏览器中都会把localStorage的值类型限定为string类型，这个在对我们日常比较常见的JSON对象类型需要一些转换
3、localStorage在浏览器的隐私模式下面是不可读取的
4、localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡
5、localStorage不能被爬虫抓取到
localStorage与sessionStorage的唯一一点区别就是localStorage属于永久性存储，而sessionStorage属于当会话结束的时候，sessionStorage中的键值对会被清空
localStorage拿到的是字符串,需要将获取到的目标转换一下
console.log("name",JSON.parse(localStorage.getItem('name')).name)
localStorage存储是字符串格式需要转换(不需要this)
localStorage.setItem('name',JSON.stringify(msg))
