关于cookie和Storage

最新推荐文章于 2024-08-08 16:18:02 发布

睡在我下铺的上铺的胖子

最新推荐文章于 2024-08-08 16:18:02 发布

阅读量2.8k

点赞数 3

分类专栏： HTML 文章标签： cookie Storage localStorage sessionStorage

本文链接：https://blog.csdn.net/real_bird/article/details/52233914

版权

HTML 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

(文章仅是本人梳理的知识，无法完全保证正确性)

文章目录：

1、cookie的简介

1.1 cookie的特性

1.2 cookie的限制

1.3 cookie的操作

2、Storage的简介

2.1 Storage对象共有的属性/方法

2.2 window的storage事件

2.3 限制

2.4 多页面同步更新效果

1、cookie的简介

Cookie是在HTTP协议下 ,服务器或脚本可以维护客户工作站上信息的一种方式。Cookie是由Web服务器保存在用户浏览器 (客户端)上的小文本文件,它可以包含有关用户的信息。无论何时用户链接到服务器 , Web 站点都可以访问 Cookie信息。

目前有些 Cookie是临时的 , 有些则是持续的。临时的 Cookie只在浏览器上保存一段规定的时间,一旦超过规定的时间, 该 Cookie就会被系统清除。

持续的 Cookie则保存在用户的 Cookie文件中, 下一次用户返回时, 仍然可以对它进行调用。在 Cookie文件中保存 Cookie,有些用户担心 Cookie中的用户信息被一些别有用心的人窃取 ,而造成一定的损害。其实, 网站以外的用户无法跨过网站来获得Cookie信息。如果因为这种担心而屏蔽 Cookie,肯定会因此拒绝访问许多站点页面。（以上内容来自百度百科）

1.1 cookie的特性

cookie是一个在客户端和服务器间来回传送文本值的内置机制。服务器可以基于其放在cookie中的数据在不同的页面间追踪客胡户的信息。用户每次访问某个域时，cookie数据都会被来回传送。由于这个特性，就会出现数据泄露的情况。（后面会介绍）。

1.2 cookie 的限制

a：每个cookie的大小限制在4kb左右，并且每个页面的cookie的数量也都是有限制的，不同的浏览器对cookie限制的数量是不同的。

b：cookie在服务器端和客户端在头信息上传递，会影响性能。

c：cookie能够被同源网页共享，造成信息泄露。比如下面这张图片就演示了这个过程。而sessionStorage能够跨页面（使用该应用的页面）暂存如启程日期这样的临时数据，又不会将其泄露到用户仍在浏览其他航班信息的窗口中。

1.3 cookie的操作

Javascript对cookie提供了document.cookie属性（很差的实用性，一般都会对其进行封装）。

当用document.cookie来获取值时，它返回当前页面可用的（根据cookie的域、路径、失效时间和安全设置）所有cookie的字符串，一系列右分号隔开的名值对，如

name1=value1;name2=value2

。所有名字和值都是经过URL编码的，（encodeuRIComponent()），所以必须使用decodeURIComponent()来解码。

当用document.cookie来设置值时，格式如:

name=value;expires=expires_time;path=domain_path;domain=domain_name;secure;

其中，name和value是必须的。例如：

document.cookie = encodeURIComponent("name") + "=" + encodeURIComponent("real");

要添加额外参数，如。

document.cookie = document.cookie + "; domain = .abc.com; path=/";

当客户端每次向服务器发送请求的时候都会发送这个cookie；当浏览器关闭的时候，它就会被删除。

如果设置了secure标志，如：

document.cookie += "; secure";

（注意这里secure是非名值对的，仅仅一个单词）。表明这个cookie只能通过SSL（secure socket layer）连接才能传输。

下面是一种cookie的封装（来自javascript高级程序设计）

var CookieUtil = {
	get:function(name){
		var cookieName = encodeURIComponent(name)+"=",
			cookieStart = document.cookie.indexOf(cookieName);
			cookieValue = null;
			
		if(cookieStart > -1){
			var cookieEnd = document.cookie.indexOf(";",cookieStart);
			if(cookieEnd == -1){
				 cookieEnd = document.cookie.length;
			}
			cookieValue = document.cookie.substring(cookieStart + cookieName.length,cookieEnd);
		}
		
		return cookieValue;
	},
	set:function(name,value,expires,path,domain,secure){
		var cookieText = encodeURIComponent(name) + "=" + encodeURIComponent(value);
		if(expires instanceof Date){
			cookieText += ";expires=" + expires.toGMTString();
		}
		if(path){
			cookieText += ";path=" + path;
		}
		if(domain){
			cookieText += ";domain=" + domain;
		}
		if(secure){
			cookieText += "; secure";
		}
		document.cookie = cookieText;
	}
	unset:function(name,path,domain,secure){
		this.set(name,"",new Date(0),path,domain,secure); 
	}
}

2、Storage的简介

有时候，一个应用程序会用到多个标签页或窗口中的数据，或多个视图中共享的数据。在这种情况下，就需要用到H5的localStorage。localStorage和sessionStorage在编程上唯一的区别是名称不同。二者在行为上的差异是数据的保存时长以它们的共享方式。如下表展示了两者的区别。

sessionStorage和localStorage的区别
sessionStorage localStorage
保存时长：数据会保存到存储它的窗口或标签页关闭时保存时长：长期存储在浏览器中
共享方式：数据只在构建它们的窗口或者标签页可见共享方式：数据可被同源的每个窗口会标签页共享。

sessionStorage和localStorage的区别
sessionStorage	localStorage
保存时长：数据会保存到存储它的窗口或标签页关闭时	保存时长：长期存储在浏览器中
共享方式：数据只在构建它们的窗口或者标签页可见	共享方式：数据可被同源的每个窗口会标签页共享。

2.1 Storage对象共有的属性/方法

length：表示目前Storage对象中存储的键值对的数量。（仅在同源情况下）

key(index)：允许获取一个指定位置的键。最有用的情况是从0开始遍历到（length-1），拿个每个键名，然后再对其进行操作。

for(var i=0,len=localStorage.length;i<len;i++){
	var name = localStorage.key(i);
	localStorage.setItem(name,'value'+i);
}

getItem(key)：拿到给定的key返回对应的值的一种方式。另一种方式是将Storage对象当做数组，将键当做索引。如：localStorage['sex']。如果存在键为sex的话。

setItem(key,value)：将对应的键值对存入到指定的Storage(localStorage或者sessionStorage)。如果已经存在相同的key，则value会覆盖原来的值。

removeItem(key)：移除key对应的键值对。如果没有key，则不执行任何操作。

clear()：当你不需要缓存或者需要将所有的缓存键值对重新设置时，调用对用的Storage对象。如：localStorage.clear()可以清楚本地缓存中的所有键值对儿。如果Storage对象本来就是空的，那么他不执行任何操作。

2.2 window的storage事件
某些情况下，一个页面修改其缓存数据时，其他页面的缓存数据也要做相应修改并做相应的操作。以上述订票为例，一个页面更改了行程日期后，如果其他同源页面设置了监听事件，那么可以基于这些改变的数据做其他操作。这里用的window的storage事件。一个页面的缓存发生改变时，会触发其他页面的window.onstorage或window.addEventListener('storage',handle,false)事件。

window.addEventListener('storage',handle,false);

这个事件的handle函数有个参数。它是StorageEvent对象。它包含了与存储变化有关的所有必要信息。 function handle(e)。{......}。e就是StorageEvent对象。属性有：

key：包含了存储过程中发生变化（更新，删除）的键。

oldValue：发生变化前的值。对于新添加的数据，oldValue的属性值是null。

newValue：发生变化后的值。对于删除的数据，newValue的值是null。

url：指向Storage时间发生的源。

storageArea：一个引用，指向值发生变化的Storage。

window.onstorage = function(e){
	console.log(e.url);
	console.log(e.storageArea);
	for(var i=0;i<len;i++){
		if(e.newValue == aInputs[i].value){//对radio和checkbox才使用checked事件
			aInputs[i].checked = true;
		}else if(e.oldValue == aInputs[i].value){
			aInputs[i].checked = false;
		}
	}
}

上面控制台输出的第一个是url。第二个是storageArea对象。（选中的数据）

2.3 限制

与其他客户端数据存储方案类似，Storage同样也有限制。这些限制因浏览器而异。一般来说，每个限制是以源（协议，域名，端口）为单位的。也就是说，每个来源都有固定大小的空间保存自己的数据。所以在实际应用中需要考虑到这种限制。不过对于文本数据来说的话，这种限制是足够的。

对于localStorage而言，大多数桌面浏览器都会设置5MB的限制。Chrome和Safari对每个来源的限制是2.5MB。iOS版Safari和Andriod版Webkit的限制也是2.5MB。

对sessionStorage的限制也是因浏览器而异。Chrome、Safari、iOS版Safari的Android版Webkit都有限制，也是2.5MB。IE8+和Opera对sessionStorage的限制是5MB。

2.4 多页面更新效果

我们有这样一个需求。在两个同源页面，一个页面更新了信息，另一个页面随之更新。传统的做法是发送一个ajax请求给服务器，在同源页面检测（定时？）服务器的内容变化，一旦变化，这个同源页面的信息也随之变化。这个一来一回的http请求（相应）会拖慢页面相应速度，小号cpu资源。

而我们使用localStorage就很好的解决了这个问题。关键代码如下。

<body>
	<p><input type="checkbox" value="萝卜" />萝卜</p>
	<p><input type="checkbox" value="青菜" />青菜</p>
	<p><input type="checkbox" value="西红柿" />西红柿</p>
	<p><input type="checkbox" value="茄子" />茄子</p>
	
<script>
	window.onload = function(){
		var aInputs = document.getElementsByTagName('input'),
			len = aInputs.length;
		for(var i=0;i<len;i++){
			if(aInputs[i].type == "radio" || aInputs[i].type == "checkbox"){
				if(window.localStorage.getItem('food'+i)){
					aInputs[i].checked =  true;
				}
			}
		}
		
		for(var i=0;i<len;i++){
			aInputs[i].index = i;
			aInputs[i].onclick = function(){
				if(this.type == "radio" || this.type == "checkbox"){
					if(this.checked){//对radio和checkbox才使用checked事件
						window.localStorage.setItem('food'+this.index,this.value)
					}else{
						window.localStorage.removeItem('food'+this.index);
					}
				}
			} 
		}
		
		window.onstorage = function(e){
			console.log(e.url);
			console.log(e.storageArea);
			for(var i=0;i<len;i++){
				if(e.newValue == aInputs[i].value){//对radio和checkbox才使用checked事件
					aInputs[i].checked = true;
				}else if(e.oldValue == aInputs[i].value){
					aInputs[i].checked = false;
				}
			}
		}
	}
</script>
</body>