文章目录:
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的简介
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 保存时长:数据会保存到存储它的窗口或标签页关闭时 保存时长:长期存储在浏览器中 共享方式:数据只在构建它们的窗口或者标签页可见 共享方式:数据可被同源的每个窗口会标签页共享。
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>