• 咨询热线
    0592-5527850
  • 咨询热线
    0592-5527850
  • 咨询热线
    0592-5527850
  • 咨询热线
    0592-5527850
  • 咨询热线
    0592-5527850
  • 咨询热线
    0592-5527850
  • 咨询热线
    0592-5527850
  • 咨询热线
    0592-5527850
报名咨询 0元入学 提供住宿 带薪实习 就业保障 网上报名 咨询热线0592-5527850
经纬盈创
WEB前端培训 > 前端学堂> web前端培训:HTML5技术之Cookie会话跟踪技术

web前端培训:HTML5技术之Cookie会话跟踪技术

  一、Cookie会话跟踪技术介绍

  会话跟踪是Web程序中常用的一种技术,用来跟踪用户的整个会话,常用的会话跟踪技术有Cookie与Session,Session一般用在服务器端,而Cookie一般使用在客户端,可以在客户端保存临时数据, 那这里我们要重点介绍Cookie会话跟踪技术。

  Cookie会话跟踪技术一直以来都是广大网络用户和Web开发人员使用较多的一种功能和技术, Cookie会话跟踪技术产生也是由于HTTP协议在互联网上的快速发展, 互联网的发展带动了Cookie在浏览器中的广泛使用,并越来越受到欢迎。Cookie会话跟踪技术是在HTTP协议下,服务器或脚本可以维护客户工作站上信息的一种方式, 一般Cookie较多的存储在客户端,是由Web 服务器保存在用户浏览器(客户端)上的小文本文件,它可以包含有关用户的信息,信息量一般不会太大, 它只能保存少量的文本信息,无论何时用户链接到服务器,Web 站点都可以访问 Cookie 信息。

  二、Cookie的机制

  在程序中,会话跟踪是很重要的事情。理论上,一个用户的所有请求操作都应该属于同一个会话,而另一个用户的所有请求操作则应该属于另一个会话,二者不能混淆。

  Cookie实际上是一小段的文本信息。客户端请求服务器,如果服务器需要记录该用户状态,就使用response向客户端浏览器颁发一个Cookie。客户端浏览器会把Cookie保存起来。当浏览器再请求该网站时,浏览器把请求的网址连同该Cookie一同提交给服务器。服务器检查该Cookie,以此来辨认用户状态。服务器还可以根据需要修改Cookie的内容。

  Cookie在你浏览网页的时候,网站服务器放在客户端里面的一个小小的TXT文件。这个文件里面存储了一些与你访问的这个网站有关的一些东西,当你下一次访问这个网站的时候,Cookie就会记住你上次访问时候的一些状态或者设置,让服务器针对性的发送页面的相关内容。Cookie里面包含的信息并没有一个标准的格式,各个网站服务器的规范都可能不同,但一般会包括:所访问网站的域名,访问开始的时间,访问者的IP地址等客户端信息,访问者关于这个网站的一些设置等等。比如,你设置的诸如百度一个页面要显示几条搜索结果之类的信息,即使你不登录你的百度账号,你下次访问时也能够保存下来,这就是上次你访问时把相关信息放入了Cookie的效果。如果是在线购物网站,还记录了一些你的购物车,储物架以及你的账户名等信息。另外有些网站则会通过Cookie把你的登录账号和密码记下来,这样你下次打开浏览器就会自动登录。

  当然,如果你在系统文件夹中打开Cookie的TXT文件,你并不会看到这些信息而只能看到一串乱七八糟的字符,因为为了安全起见,Cookie的内容一般都是加密的,只有对应的服务器才能读懂。另外,由于Cookie只是TXT文件,而不是程序,更不是病毒,不能自己运行,不会对操作系统和其他任何计算机程序产生影响,也不会通过互联网传播,因此它对互联网安全实际上不构成威胁。

  三、Cookie的利弊

  Cookie虽然在持久保存客户端数据提供了方便,分担了服务器存储的负担,但还是有很多局限性的。

  第一: 每个特定的域名下生成的Cookie数量有限制

  1、IE6或更低版本最多20个Cookie

  2、IE7和之后的版本最后可以有50个Cookie

  3、Firefox最多50个Cookie

  4、chrome和Safari没有做硬性限制

  IE和Opera会清理近期最少使用的Cookie,Firefox会随机清理Cookie。

  第二: Cookie的最大大约为4096字节,为了兼容性,一般不能超过4095字节。

  Cookie的优缺点

  Cookie的优点:极高的扩展性和可用性

  1、通过良好的编程,控制保存在Cookie中的Session对象的大小。

  2、通过加密和安全传输技术(SSL),减少Cookie被破解的可能性。

  3、只在Cookie中存放不敏感数据,即使被盗也不会有重大损失。

  4、控制Cookie的生命期,使之不会永远有效。偷盗者很可能拿到一个过期的Cookie。

  Cookie的缺点:

  1、Cookie数量和长度的限制。每个domain最多只能有20条Cookie,每个Cookie长度不能超过4KB,否则会被截掉。

  2、安全性问题。如果Cookie被人拦截了,那人就可以取得所有的Session信息。即使加密也与事无补,因为拦截者并不需要知道Cookie的意义,他只要原样转发Cookie就可以达到目的了。

  3、有些状态不可能保存在客户端。例如,为了防止重复提交表单,我们需要在服务器端保存一个计数器。如果我们把这个计数器保存在客户端,那么它起不到任何作用。

  四、Cookie如何使用

  在JavaScript语言中,我们使用document。cookie: 获取/设置Cookie

  格式为: name=value;[expires=过期时间];[path=访问路径];[domain=域名];[secure]

  如: document。cookie = "username=zhangsan";

  五、Cookie的应用场景

  4、1 自动登录

  4、2电商购物车功能

  4、3 记录用户登录网址的次数

  4、4 商品浏览记录

  六、电商购物车案例

  在浏览器本地实现购物车功能

  在商品详情界面, 我们可以点击加入购物车按钮, 将商品添加到购物车中, 该加入购物车的商品数据实际保存在Cookie中, 商品详情页面如下图:

1

  添加多个商品到购物车后, 我们可以前往我的购物车中查看购物车中的商品,这些商品数据我们都是从Cookie中获取的, 如下图:

2


上一篇:Web前端知识体系精简
下一篇:UI培训:UI设计中数据可视化对用户的作用
相关阅读:
Web前端知识体系精简-----HTML篇 web前端开发者,必须了解的各种build工具! web开发必学的8个网页优化技巧! web前端培训:HTML5技术之Cookie会话跟踪技术 Web前端知识体系精简 前端优化:9 个技巧,提高 Web 性能
IT培训
UI培训 PHP培训 JAVA培训
web前端培训 游戏开发培训
常见问题
最新资讯