相同点:都存储在客户端
不同点:
(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))