cookies sessionStorage和localstorage

相同点：都存储在客户端

不同点：

（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))