cookie,localStorage和sessionStorage区别

基本概念

cookie

cookie是存储于访问者的计算机中的变量。每当同一台计算机通过浏览器请求某个页面时,就会发送这个cookie。你可以使用JavaScript来创建和取回cookie的值。

cookie分为会话cookie和持久cookie,会话cookie是指在不设定它的生命周期expires时的状态,前面说了,浏览器的开启和关闭就是一次会话,而关闭浏览器时,会话cookie就会随着浏览器销毁。而关闭一个页面时,不影响会话cookie的销毁。会话cookie就像我们没有办理积分卡时,单一的买卖过程,离开之后,信息则销毁。

持久cookie则是设定了它的生命周期expires,此时,cookie像商品一样,有个保质期,关闭浏览器之后,它不会销毁,直到设定的过期时间。对于持久cookie,可以在同一个浏览器中传递数据,比如,你在打开一个淘宝页面登陆后,你在点开一个商品页面,依然是登录状态,即便你关闭了浏览器,再次开启浏览器,依然会是登录状态。这就是因为cookie自动将数据传送到服务器端,在反馈回来的结果。持久cookie就像是我们办理了一张积分卡,即便离开,信息一直保留,直到时间到期,信息销毁。(当设置生命周期后,关闭浏览器在打开,此时用document.cookie会显示为空,但是火狐中,右击-》查看页面信息-》安全-》查看cookie 会看到自己保存的cookie和过期时间)。

当访问者首次访问页面时,他或她也许会填写他/她们的名字。名字会存储于cookie中。当访问者再次访问网站时,他们会收到类似“Welcome Jaconb”的欢迎词。而名字则是从cookie中取回的。这通常就是通过cookie中存入一段辨别用户身份的数据来实现的。

在HTML5之前,这些都是由cookie完成的。但是cookie不适合大量的数据存储,因为它们由每个对服务器的请求来传递,这使得cookie速度很慢而且效率也不高。

运用实例:

名字 cookie
当访问者首次访问页面时,他或她也许会填写他/她们的名字。名字会存储于 cookie 中。当访问者再次访问网站时,他们会收到类似 "Welcome John Doe!" 的欢迎词。而名字则是从 cookie 中取回的。
密码 cookie
当访问者首次访问页面时,他或她也许会填写他/她们的密码。密码也可被存储于 cookie 中。当他们再次访问网站时,密码就会从 cookie 中取回。
日期 cookie
当访问者首次访问你的网站时,当前的日期可存储于 cookie 中。当他们再次访问网站时,他们会收到类似这样的一条消息:"Your last visit was on Tuesday August 11, 2005!"。日期也是从 cookie 中取回的。

设置cookie

function setCookie( cname, cvalue, exdays ) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays*24*60*60*1000));
    var expires = "expires=" + d.toGMTString();
    document.cookie = cname + '=' + cvalue + ';' + expires;
}

获取cookie值

function getCookie (cname) {
	var name = cname + "=";
	var ca = document.cookie.split(";");
	for (var i = 0; i < ca.length;i++) {
	    var c = ca[i].trim();
	    if (c.indexOf(name) == 0) return c.substring(name.length, c.length);
	}
	return "";
}

给cookie设置终止时间

例如:如果要将cookie设置为10天后过期,可以这样实现。

//获取当前时间
var date=new Date();
var expiresDays=10;
//将date设置为10天以后的时间
date.setTime(date.getTime()+expiresDays*24*3600*1000);
//将userId和userName两个cookie设置为10天后过期
document.cookie="userId=828; userName=hulk; expires="+date.toGMTString();

其中GMTString是以GMT格式表示的时间字符串,这条语句就是将userId这个cookie设置为GMT_String表示过期时间,超过这个时间,cookie将消失,不可访问。

封装cookie方法,js操作cookie操作类封装
var cookie = {
			setCookie: function( cname, cvalue, exdays ) {
				var d = new Date();
				d.setTime(d.getTime() + (exdays*24*60*60*1000));
				var expires = 'expires=' + d.toGMTString();
				document.cookie = cname + '=' + cvalue + ';' + expires;
			},
			getCookie: function (cname) {
				var i,
					name = cname + '=';
					cookies = (document.cookie).split(';');
				for ( i = 0; i < cookies.length; i++) {
					var options = cookies[i].trim();
					if (options.indexOf(cname) !== -1) {
						return options.substring(name.length, options.length);	
					}
				}
				return "";
			},
			deleteCookie: function (cname) {
				var d = new Date();
				d.setTime(d.getTime() - 1000);
				var expires = 'expires=' + d.toGMTString();
				document.cookie = cname + '=v' + ';' + expires;
			}
		};

注意:chrome处于安全性考虑不能设置本地cookie,导致document.cookie=""这样的语法都失效的(其他浏览器可以)。需要放在服务器上才会生效。

在HTML5之前,这些都是由cookie完成的。但是cookie不适合大量数据的存储,因为它们由每个对服务器的请求来传递,这使得cookie速度很慢而且效率不高。

在HTML5中提供了两种在客户端存储数据的新方法:

sessionStorage

为每一个给定的源(given origin)维持一个独立的存储区域,该存储区域在页面会话期间可用(即只要浏览器处于打开状态,包括页面重新加载和恢复)。

localStorage

同样的功能,但是在浏览器关闭,然后重新打开后,除非数据被清除,否则依然存在。

猜你喜欢

转载自blog.csdn.net/qq_30114149/article/details/79383341