JavaScript 教程学习笔记(1)-cookie学习

文章标签: javascript,cookie详解
2014-11-25 17:10:09     13 人阅读    

设置一个cookie
     Set-Cookie: name=chemdemo; domain=.demo.com; path = /;secure


cookie包括:
     Cookie名称,Cookie名称必须使用只能用在URL中的字符,一般用字母及数字
     Cookie值,Cookie值同样也只能使用可以用在URL中的字符,一般需要在设置Cookie值时对其使用encodeURI或者(encodeURIComponent()方法)方法进行转义
     Expires,过期日期,一个GMT格式的时间,当过了这个日期之后,浏览器就会将这个Cookie删除掉,当不设置这个的时候,Cookie在浏览器关闭后消失
      Path,一个路径,在这个路径下面的页面才可以访问该Cookie,一般设为“/”,以表示同一个站点的所有页面都可以访问这个Cookie
      Domain,子域,指定在该子域下才可以访问Cookie,例如要让Cookie在bbs.x-life.com下可以访问,但在news.x-life.com下不能访问,则可将domain设置成bbs.x-life.com
      Secure,安全性,指定Cookie是否只能通过https协议访问,一般的Cookie使用HTTP协议既可访问,如果设置了Secure(没有值),则只有当使用https协议连接时cookie才可以被页面访问


 

//简化cookie的功能
var CookieUnit = {
       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 = decodeURIComponent(document.cookie.subString(cookieStart + cookieName.length, cookieEnd));
			}
			   return cookieValue;
			},

      set: function(name, value, expires, path, domain, secure) {
		var cookieText = encodeURIComponent(name) + '=' + encodeUTIComponent(value);
		if(expires instanceof Date) {
		   cookieText += ";expires=" + Date.toGTMString(expires);
	    }
		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);
		   }
		};

     CookieUnit.set('name', 'chemdemo');

 

 

//子cookie
name=name1=value1&name2=value2&name3=value3.....

//操作子cookie
var SubCookieUnit = {
//找出子cookie的信息
	get: function(name, subName) {
		var subCookies = this.getAll(name);
		if(subCookies) {
		return subCookies[subName];
		} else {
		return null;
		}
	},

getAll: function(name) {
	var cookieName = encodeURICopmonent(name) + '=',
	cookieStart = document.cookie.indexOf(cookieName),
	cookieValue = null,
	result = {};
	
	if(cookieStart > -1) {
		var cookieEnd = document.cookie.indexOf(';', cookieStart);
		if(cookieEnd == -1) {
		cookieEnd = document.cookie.length;
	}
	   cookieValue = document.cookie.subString(cookieStart + cookieName.length, cookieEnd); 
	}
	
	if(cookieValue.length > 0) {
		var subCookies = cookieValue.split(" & ");
		for(var i=0; i<subCookies.length; i++) {
		var parts = subCookies[i].split("=");
		result[decodeURIComponent(part[0])] = [decodeURIComponent(part[1])];
	}
	return rasult;
	}
	
	return null;
	},

//设置子cookie
set: function(name, subName, value, expries, path, domain, secure) {
	var subcookies = this.getAll(name) || {};
	subcookies[subName] = value;
	this.setAll(name, subcookies, expries, path, domain, secure);
},

setAll: function(name, subcookies, expries, path, domain, secure) {
	var cookieText = encodeURIComponent(name) + '=';
	var subcookieParts = [];

	for(var subName in subcookies) {
	if(subName.length > 0 && subcookies.hasOwnProperty(subName)) {
	subcookieParts.push(encodeURIComponent(subName) + '=' + encodeURIComponent(subcookies[subName]));
	}
   }

	if(subcookieParts.length > 0) {
	   cookieText += subcookieParts.join(" & ");
	
	if(expries instanceof Date) {
	   cookieText += ';expries=' + expries.toGTMString();
	}
	
	if(path) {
	   cookieText += ";path=" + path;
	}
	if(domain) {
	   cookieText += ';domain=' + domain;
	}
	if(secure) {
	    cookieText += ';' + secure;
	}
	} else {
	   cookieText += ';expries' + (new Date(0)).toGTMString();
	}
	   document.cookie = cookieText;
	},

//删除子cookie
unset: function(name, subName, path, domain, secure) {
	   var subcookies = this.getAll(name);
	if(subcookies) {
	   delete subcookies[subName];
	this.setAll(name, subcookies, null, path, domain, secure);
	}
},

	unsetAll: function(name, path, domain, secure) {
	   this.setAll(name, null, new Date(0), path, domain, secure);
	}
}

 

假设cookie为document.cookie=data=name=chemdemo & book=Me%20JavaScript

document.cookie=data=name=chemdemo & book=Me%20JavaScript;

//获取全部子cookie
var data = SubCookieUnit.getAll('data');
alert(data.name);//chemdemo
alert(data.book);//Me JavaScript

//获取子cookie
alert(SubCookieUnit.get('name'));//chemdemo
alert(SubCookieUnit.get('book'));//Me JavaScript


//DOM存储机制
//Storage类型

clear()--删除所有值
getItem(name)--根据指定的名name获取对应值
key(index)--在指定的数据位置获取该位置名字
removeItem(name)--删除由name指定的名-值对
setItem(name, value)--为指定名name设置一个对应值


//sessionStorage对象
//存储在sessionStorage对象中的数据可以跨页面刷新而存在(浏览器崩溃后重启任然可用),直到浏览器关闭后消失
//sessionStorage对象是Storage对象的实例,sessionStorage对象继承Storage对象的方法
//IE8中,可以强行进行磁盘写入:
sessionStorage.begin();//确保这段代码在执行时不发生其他磁盘写入操作
sessionStorage.name = 'chemdemo';
sessionStorage.book = 'JavaScript';
sessionStorage.commit();//调用后立即写入磁盘

var name = sessionStorage.getItem('name');//使用方法读取数据
var book = sessionStorage.book;//使用属性读取数据

for(var i-0, len=sessionStorage.length; i<len; i++) {
//结合length属性和key()方法迭代sessionStorage中的值
var key = sessionStorage.key(i);
var value = sessionStorage.getItem(key);
alert(key + " : " + value);
}
for(var key in sessionStorage) {
//for in 方法
var value = sessionStorage.getItem(key);
alert(key + " : " + value);
}

delete sessionStorage.name;//删除值
delete sessionStorage.removeItem(book);//删除值

//globalStorage对象(ff2实现)
globalStorage['wrox.com'].name = 'wrox';//保存数据
var name = globalStorage['wrox.com'].name;//获取数据

globalStorage['wrox.com'].removeItem(name);//globalStorage['wrox.com']是Storage的实例,globalStorage对象不是

globalStorage[""].name = 'chemdemo';//存储数据,可以让任何人访问
globalStorage['net'].name = 'chemdemo';//存储数据,可以让任何以.net结尾的域名访问
globalStorage[location.host].name = 'chemdemo';//不确定域名,可以location.host作属性名较安全


存储在globalStorage属性中的数据会保留在磁盘上,直到通过removeItem()或delete操作符移除,或用户清除缓存

localStorage对象

     localStorage上不能指定任何访问性规则,为了访问到同一个localStorage对象,页面必须来自同一个域名(子域名无效)、
    使用同一种协议、在同一个端口上(这相当于globalStorage[location.host])

localStorage是Storage对象的实例:
     localStorage.setItem("name", "chemdmeo");
     localStorage.book = 'js';

存储在localStorage中的数据保留到js删除或用户清除缓存(同globalStorage)

兼容只支持globalStorage的浏览器


function getLocalStorage() {
if(typeof localStorage == 'object') {
return localStorage;
} else if(typeof globalStorage == 'object') {
return globalStorage[location.host];
} else {
throw new Error('Local storage not available.');
}
};
var storage = getLocalStorage();


 StorageItem类型
     Storage对象所存储的每个项目都是StorageItem的实例,无论何时存入新值,都会创建一个StorageItem对象属性
     value:被存储的数据的值(任何时候都可以设置StorageItem对象的value属性)
     secure:表示该值是否通过HTTPS访问的布尔值,默认时,使用HTTP访问时,该值设为false,只有在设置为HTTPS访问时才可以设置secure标识


 storage事件
     对Storage对象进行任何修改,都会在文档上触发storage事件属性:
     domain--进行变更的存储的域名
     key--进行设置或删除的键名
     newValue--要将该键设置为的值,如果删除键则是null
    oldValue--键被修改之前的值
     EventUtil.addHandler(document, 'storage', function(event) {//监听storage事件
         alert('Storage changed for : ' + event.domain);
   });


原文地址:http://www.itmmd.com/201411/216.html
该文章由 萌萌的IT人 整理发布,转载须标明出处。

JavaScript 教程学习笔记(2)—js常用脚本(操作剪贴板,屏蔽字符,选择文本,避免多次提交表单,表单交互)   上一篇
下一篇  Spring mvc新手入门(2)-spring mvc 新手入门常见问题汇总

精彩回复
发表评论
姓名:       

《程序员app》专门为程序员量身定做!