1.背景介绍
什么是COOKIE?
Cookie 是小饼干的意思。cookie 确实非常小,它的大小限制为4KB左右, 是由W3C组织提出,最早由Netscape社区发展的一种机制。目前Cookie已经成为标准, 所有的主流浏览器如IE、Netscape、Firefox、Opera等都支持Cookie。 它的主要用途有保存登录信息, 比如你登录某个网站市场可以看到“记住密码”, 这通常就是通过在 Cookie 中存入一段辨别用户身份的数据来实现的。
什么是LOCALSTORAGE?
localStorage 是 HTML5 标准中新加入的技术,它并不是什么划时代的新东西。 早在 IE 6 时代,就有一个叫 userData 的东西用于本地存储,而当时考虑到浏览器兼容性, 更通用的方案是使用 Flash。而如今,localStorage 被大多数浏览器所支持,更多用他来存储数据。
什么是SESSIONSTORAGE?
sessionStorage 与 localStorage 的接口类似, 但保存数据的生命周期与 localStorage 不同。 做过后端开发的同学应该知道 Session 这个词的意思, 直译过来是“会话”。 而 sessionStorage 是一个前端的概念, 它只是可以将一部分数据在当前会话中保存下来, 刷新页面数据依旧存在。 但当页面关闭后,sessionStorage 中的数据就会被清空。
2.知识剖析
COOKIE的特性
一个cookie的设置以及发送过程分为以下四步:
①客户端发送一个http请求到服务器端
②服务器端发送一个http响应到客户端,其中包含Set-Cookie头部
③客户端发送一个http请求到服务器端,其中包含Cookie头部
④服务器端发送一个http响应到客户端
3.常见问题
COOKIES,SESSIONSTORAGE和LOCALSTORAGE的区别?
4.解决方案
特性 | Cookie | localStorage | sessionStorage |
---|---|---|---|
生命周期 | 一般由服务器生成,可设置失效时间。如果在浏览器端生成Cookie,默认是关闭浏览器后失效 | 除非被清除,否则永久保存 | 仅在当前会话下有效,关闭页面或浏览器后被清除 |
存放数据大小 | 4K左右 | 一般为5MB | |
与服务器端通信 | 每次都会携带在HTTP头中,如果使用cookie保存过多数据会带来性能问题 | 仅在客户端(即浏览器)中保存,不参与和服务器的通信 | |
易用性 | 需要程序员自己封装,源生的Cookie接口不友好 | 源生接口可以接受,亦可再次封装来对Object和Array有更好的支持 |
5.代码实战
https://v.qq.com/x/page/q06546wcq9o.html
6.拓展思考
三者的使用场景
localStoragese:常用于长期登录(+判断用户是否已登录),适合长期保存在本地的数据,也可以用来统计页面访问次数。
Session用于保存每个用户的专用信息,变量的值保存在服务器端,通过SessionID来区分不同的客户。也可以用来统计当前页面元素的点击次数。比如杀人游戏
cookie,判断用户是否登陆过网站,以便下次登录时能够实现自动登录。如果我们删除cookie,则每次登录必须重新填写登录的相关信息。比如页面一键换色,下次打开是换后的颜色。
7.参考文献
参考一: MDN-Cookie Web文档
参考二: 详说 Cookie, LocalStorage 与 SessionStorage - 思否
参考三: jquery.cookie.js 使用方法
8.更多讨论
Q1:cookie的优点
极高的扩展性和可用性
通过良好的编程,控制保存在cookie中的session对象的大小。
通过加密和安全传输技术(SSL),减少cookie被破解的可能性。
只在cookie中存放不敏感数据,即使被盗也不会有重大损失。
控制cookie的生命期,使之不会永远有效。偷盗者很可能拿到一个过期的cookie。