cookies sessionStorage和localstorage

源码 · 2024-9-3 15:27:13

类似点：都存储在客户端

差别点：

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

cookies sessionStorage和localstorage

所属分类: 问答交流

新帖推荐: 30日

推荐作品