大家好,我是IT修真院郑州分院第一期的学员胡嘉杰,一枚正直纯洁善良的WEB前端程序员。
今天给大家分享一下,修真院官网JS任务6,深度思考中的知识点——请描述一下cookies,sessionStorage和localStorage的区别?
1.背景介绍
当我们在网页中向服务器请求信息时,一般发送http请求, 但是HTTP协议是无状态协议,无状态是指协议对于事务处理没有记忆能力, 一旦数据交换完毕,客户端与服务器端的连接就会关闭,再次交换数据需要建立新的连接。 这就意味着服务器无法从连接上跟踪会话。那当我们在一个网站登录之后, 在网站其他页面怎么判断是否已经登录? 要跟踪该会话,必须引入一种机制。
2.知识剖析
1.cookie
Cookie 是小甜饼的意思。顾名思义,cookie 确实非常小,它的大小限制为4KB左右, 是网景公司的前雇员 Lou Montulli 在1993年3月的发明。
cookie指的是储存在用户本地终端上的数据,它是由Web服务器创建的, 当客户端第一次请求服务器,如果服务器需要记录该用户状态,就使用response向客户端浏览器颁发一个Cookie。 客户端浏览器会把Cookie保存起来。当浏览器再请求该网站时,浏览器把请求的网址连同该Cookie一同提交给服务器。 服务器检查该Cookie,以此来辨认用户状态。服务器还可以根据需要修改Cookie的内容。
Cookie在生成时就会被指定一个Expire值,这就是Cookie的生存周期,在这个周期内Cookie有效, 超出周期Cookie就会被清除。有些页面将Cookie的生存周期设置为“0”或负值,这样在关闭浏览器时, 就马上清除Cookie,不会记录用户信息,更加安全。
用户也可以在浏览器端进行设置,禁止服务器向客户端浏览器颁发一个Cookie。
我们可以在脚本中读取,创建和存储 cookie; 例如下面的代码会输出本页面所有的Cookie。
document.write(document.cookie);
2.localStorage
localStorage 是 HTML5 标准中新加入的技术,它并不是什么划时代的新东西。早在 IE 6 时代, 就有一个叫 userData 的东西用于本地存储,而当时考虑到浏览器兼容性,更通用的方案是使用 Flash。 而如今,localStorage 被大多数浏览器所支持,如果你的网站需要支持 IE6+, 那以 userData 作为你的 polyfill 的方案是种不错的选择。
3.sessionStorage
sessionStorage 与 localStorage 的接口类似,但保存数据的生命周期与 localStorage 不同。 做过后端开发的同学应该知道 Session 这个词的意思,直译过来是“会话”。而 sessionStorage 是一个前端的概念, 它只是可以将一部分数据在当前会话中保存下来,刷新页面数据依旧存在。但当页面关闭后,sessionStorage 中的数据就会被清空。
特性CookielocalStoragesessionStorage
数据的生命期可设置失效时间,默认是关闭浏览器后失效除非被清除,否则永久保存仅在当前会话下有效,关闭页面或浏览器后被清除
存放数据大小4K左右一般为5MB一般为5MB
与服务器端通信每次都会携带在HTTP头中,如果使用cookie保存过多数据会带来性能问题仅在客户端(即浏览器)中保存,不参与和服务器的通信仅在当前会话下有效,关闭页面或浏览器后被清除
易用性需要程序员自己封装,源生的Cookie接口不友好源生接口可以接受,亦可再次封装来对Object和Array有更好的支持源生接口可以接受,亦可再次封装来对Object和Array有更好的支持
localStorage用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。 sessionStorage存储的数据只在会话期间有效,关闭浏览器则自动删除。
所以,在其它页面保持登录,可以在登录后往本地storage中存储一个关键字段(存储用户信息),如 :login:true
在路由变化的时候,或者在页面跳转的时候,检测是该字段值是否正确,不正确则跳转登录页;点击注销可以执行删除
3.常见问题
Cookies包含了一些敏感信息:用户名,计算机名,使用的浏览器和曾经访问的网站, 在某种程度上说已经严重危及用户的隐私和安全。
4.解决方案
下面方法能增加安全性:
设置该 Cookie 不能被脚本读取;
对 Cookie 内容进行加密,在加密前嵌入时间戳,保证每次加密后的密文都不一样(并且可以防止消息重放);
客户端请求时,每次或定时更新 Cookie 内容;
每次向 Cookie 写入时间戳,数据库需要记录最后一次时间戳;
客户端提交 Cookie 时,先解密然后校验时间戳,时间戳若小于数据数据库中记录,即意味发生攻击。
5.编码实战
6.扩展思考
WEB STORAGE相对于COOKIE的优势:
从容量上讲WebStorage一般浏览器提供5M的存储空间,用来存储视频、图片神马的不够,但对于绝大部分操作足矣
安全性上WebStorage并不作为HTTP header发送的浏览器,所以相对安全。
从流量上讲,因为WebStorage不传送到服务器,所以不必要的流量可以节省。
7.参考文献
8.更多讨论
存储方案各自的性能如何,他们的区别?
cookies,webStorage的区别?_腾讯视频
技能树.IT修真院
“我们相信人人都可以成为一个工程师,现在开始,找个师兄,带你入门,掌控自己学习的节奏,学习的路上不再迷茫”。
这里是技能树.IT修真院,成千上万的师兄在这里找到了自己的学习路线,学习透明化,成长可见化,师兄1对1免费指导。快来与我一起学习吧~
我的邀请码:64290793,或者你可以直接点击此链接:http://www.jnshu.com/login/1/64290793
网友评论