欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

cookie、session、SessionStorag和LocalStorage的概念讲解

程序员文章站 2023-09-29 09:03:12
1>cookie: 1.概念: cookie机制其实就是在客户端保持状态的方案,cookie又叫会话跟踪机制。打开一次到关闭浏览器算是一次会话。cookie可以跟踪会话,...

1>cookie:

1.概念:

cookie机制其实就是在客户端保持状态的方案,cookie又叫会话跟踪机制。打开一次到关闭浏览器算是一次会话。cookie可以跟踪会话,弥补http无状态协议的不足。

cookie由键值对构成是由服务器创建,然后通过响应发送给客户端。客户端会保存cookie,并会标注出cookie的来源(哪个服务器的cookie)。当客户端向服务器发出请求时会把所有这个服务器cookie包含在请求中发送给服务器,这样服务器就可以识别客户端了。在js中cookie以字符串的形式保存在浏览器中。

2.http中cookie

1》请求头,客户端发送给服务器端;

格式:cookie:a=a;b=b;c=c。即多个cookie用分号离开;

2》响应头,服务器端发送给客户端

一个cookie对象一个set-cookie:

set-cookie:a=a

set-cookie:b=b

set-cookie:c=c

3》cookie的覆盖

如果服务器端发送重复的cookie那么会覆盖原有的cookie,例如客户端的第一个请求服务器端发送的cookie是:set-cookie:a=a;第二请求服务器端发送的是:set-cookie:a=aa,那么客户端只留下一个cookie,即:a=aa。

3.js中cookie设置

cookie的几种常见属性:name(名称)、value(值)、expires(过期时间)、path(路径)、domain(域)、secure(安全),其中后四个是可选的。

document.cookie=’username=wangjunjie’。

1、名和值:名用来引用cookie,值是cookie的信息部分,这两部分是必选的。

设置cookie的名值:document.cookie=’username=wangjunjie’。

2、过期时间:如果cookie不设置expires,用户关闭浏览器后cookie过期,下次打开浏览器时该cookie不复存在。过期时间的格式是非常重要的,对于ie浏览器尤为重要,它应该与togmtstring()给出的格式相同。

3、路径:站点里有两个目录~/a和~/b,~/b中设置的cookie可以在它的目录及其子目录下访问,不能在~/a中访问,如果想在站点里的任何地方访问~/b中设置的cookie,则需要把path设置为’/'。

设置cookie的路径:document.cookie=’username=wangjunjie;path=/’;

4.域:默认情况下cookie仅用于设置它的域下面的页面,假设现在有两个站点a.blog.com和b.blog.com,在a.blog.com下设置的cookie不能在b.blog.com下访问,反之也是这样,如果想在两个站点下都访问这个cookie需要该domain值。

设置cookie的域:document.cookie=’username=wangjunjie;domain=blog.com’;

5、安全:cookie的最后一部分是一个boolen值,默认为false,总是发送cookie,不考虑安全性,如果设置为true,则cookie仅发送给尝试使用安全通道检索它的web服务器。

4.cookie代码

    //设置cookie
	function setcookie(name,value,days){
		var d = new date();
		d.settime(d.gettime() + (days*24*60*60*1000));
		var expires = 'expires=' +d.togmtstring();
		document.cookie=name+'='+value+';'+expires;

	}
	setcookie('shisha',18,1)
    //获取cookie
    function getcookie(cname){
    	var name = cname + '=';
    	var ca =document.cookie.split(';');
    	for(var i = 0;i

2>session

1.概念:

客户端浏览器访问服务器的时候,服务器把客户端信息以某种形式记录在服务器上。这就是session。客户端浏览器再次访问时只需要从该session中查找该客户的状态就可以了。如果说cookie机制是通过检查客户身上的“通行证”来确定客户身份的话,那么session机制就是通过检查服务器上的“客户明细表”来确认客户身份。session相当于程序在服务器上建立的一份客户档案,客户来访的时候只需要查询客户档案表就可以了。比如张三和李四分别访问该网站,在服务端会产生两个sessionid来区分该用户,而在客户端将对应的sessionid存放在cookie中,以便我们再次访问时得到我们所需的资源。

2.解决的问题:

session解决的问题和cookie一样,比如:我在www.a.com/login.php里面登陆了,我在www.a.com/index.php 也希望是登陆状态,但是这是2个不同的页面,也就是2个不同的http请求,这2个http请求是无状态的,也就是无关联的,所以无法单纯的在index.php中读取到它在login.php中已经登陆了。这是候就出现了cookie,cookie是把少量的信息存储在用户自己的电脑上,它在一个域名下是一个全局的,只要设置它的存储路径在域名www.a.com下 ,那么当用户用浏览器访问时,就可以从这个域名的任意页面读取cookie中的信息。所以就很好的解决了我在www.a.com/login.php页面登陆了,我也可以在www.a.com/index.php获取到这个登陆信息了。同时又不用反复去查询数据库。但是由于cookie 是存在用户端,而且它本身存储的尺寸大小也有限,最关键是用户可以是可见的,并可以随意的修改,很不安全。这时候session就出现了session 他解决了在一次会话中2次http的请求的关联,让它们产生联系,让2两个页面都能读取到找个这个全局的session信息。session信息存在于服务器端,所以也就很好的解决了安全问题。

3>cookie和session的区别

1、cookie数据存放在客户的浏览器上,session数据放在服务器上 2、cookie不是很安全,别人可以分析存放在本地的cookie并进行cookie欺骗, 考虑到安全应当使用session 3、session会在一定时间内保存在服务器上。当访问增多,会比较占用你服务器的性能,考虑到减轻服务器性能方面,应当使用cookie

4、单个cookie在客户端的限制是3k,就是说一个站点在客户端存放的cookie不能3k

4>cookie、sessionstorag、localstorage

共同点:

cookie、sessionstorag、localstorage都是在浏览器端存储的数据,且为同源的。

区别:

1.传输:

cookie数据始终在同源的http请求中携带(即使不需要)。而sessionstorage和localstorage不会自动把数据发给服务器,仅在本地保存。

2.存储大小:

cookie数据不能超过4k,同时因为每次http请求都会携带cookie,所以cookie只适合保存很小的数据,如会话标识。sessionstorage和localstorage虽然也有存储大小的限制,但比cookie大得多,可以达到5m或更大。

3.保存时间:

数据有效期不同,sessionstorage:仅在当前浏览器窗口关闭前有效;localstorage:始终有效,窗口或浏览器关闭也一直保存,除非主动删除数据,否则数据是永远不会过期的。因此用作持久数据;cookie只在设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭。如果不设置默认浏览器关闭失效。

4.作用域不同:

不同页面或标签页间无法共享sessionstorage的信息,sessionstorage为每一个给定的源(given origin)维持一个独立的存储区域,该存储区域在页面会话期间可用(即只要浏览器处于打开状态,包括页面重新加载和恢复)。localstorage在所有同源窗口中都是共享的;cookie也是在所有同源窗口中都是共享的。

5>localstorage和sessionstorage使用时使用相同的api

通过getitem或直接使用localstorage["key"]获取到的信息均为实际存储的副本

localstorage.setitem("name","value");//以“name”为名称存储一个值“value”
localstorage.getitem("name");//获取名称为“name”的值
localstorage.removeitem("name");//删除名称为“name”的信息。
localstorage.clear();//清空localstorage中所有信息
枚举localstorage的方法:
for(var i=0;i

 

;>