JavaScript-cookie与存储

        昨天因为家里有事，Cookie与储存这一张没有学完。今天继续昨天的学习，cookie本来是作为服务器和浏览器做数据交互时的一种策略。服务器把少量的信息以文本的形式存储在本地。因此cookie的安全系数并不高。今天学习cookie的创建和使用。

     1.cookie的创建和提取

         javascript       

    /*
    //1.利用面向对象封装类的思想封装cookie,具体实现在第二种方法里面
    var MyCookie = function(){
	var name;				//cookie的键。必须的
	var value;				//cookie的值。必须的
	var expires;			//过期时间。不是必须的，默认为浏览器关闭
	var path;				//访问路径。指定路径访问
	var domain;				//域名
	var secure;				//指定是否https访问
	var cookieStr;
	
	this.getName = function(){
		return name;	
	}
	this.setName = function(obj){		//obj类型为Stirng
		name = obj;
	}
	this.getValue = function(){
		return value;	
	}
	this.setValue = function(obj){		//obj类型为Stirng
		value = obj;
	}
	this.getExpires = function(){
		return expires;	
	}
	this.setExpires = function(obj){	//obj类型为Number
		expires = obj;
	}
	this.getPath = function(){
		return path;	
	}
	this.setPath = function(obj){		//obj类型为Stirng
		path = obj;
	}
	this.getDomain = function(){
		return domain;	
	}
	this.setDomain = function(obj){		//obj类型为Stirng
		domain = obj;
	}
	this.getSecure = function(){
		return secure;
	}
	this.setSecure = function(obj){		//obj类型为Boolean
		secure = obj;
	}
	this.toCookie = function(){
		if(name == undefined || value == undefined)
			throw new Error('请设置name,value属性！');	
		cookieStr = name + '=' + value + ';'
		if(expires){
			cookieStr += 'expires=' + expires + ';';
		}
		if(path){
			cookieStr += 'path=' + path + ';';
		}
		if(domain){
			cookieStr += 'domain=' + domain +';';
		}
		if(secure === true){
			cookieStr += 'secure;';
		}
		return cookieStr;
	}
	this.fromCookie = function(){
	}
    }
    */

    //2.利用构造函数的方式封装cookie类
    var MyCookie = function(name,value,expires,path,domain,secure){
	this.name = name;
	this.value = value;
	this.expires = expires;
	this.path = path;
	this.domain = domain;
	this.secure = secure;
	for(var i = 0; i < arguments.length - 1; i++){
		if(i == 2){
			if(typeof arguments[i] != 'number')
				throw new Error('setCookieDate参数应该为number类型！');
		}else{
			if(typeof arguments[i] != 'string')
				throw new Error('请输入string类型的值！');
		}
	}
	this.toCookie = function(){
		if(name == undefined || value == undefined)
			throw new Error('请设置name,value属性！');	
		cookieStr = encodeURIComponent(name) + '=' + encodeURIComponent(value) + ';';
		if(expires){
			var expiresNew = setCookieDate(expires);
			cookieStr += 'expires=' + expiresNew + ';';
		}
		if(path){
			cookieStr += 'path=' + path + ';';
		}
		if(domain){
			cookieStr += 'domain=' + domain +';';
		}
		if(secure === true){
			cookieStr += 'secure;';
		}
		//console.log(cookieStr);
		document.cookie = cookieStr;
	}

	function setCookieDate(day){								//设置cookie失效时间，参数day表示延迟删除的天数
		var date = new Date();
		var dateStr = date.getDate();
		date.setDate(dateStr + day);
		return date;
	}

    }
    //静态方法，无需创建实例即可调用
    MyCookie.getValueFromCookie = function(name){
	var cookiesStr = document.cookie;
	var namePatern = new RegExp(encodeURIComponent(name) +"=(.+?);",'g');
	return decodeURIComponent(namePatern.exec(document.cookie)[1]);		//RegExp.$1同样也可以获取第一个分组的内容
    }	

    window.addEventListener('load',function(){
	console.log(MyCookie.getValueFromCookie('ff'));
    },false);

   2.其他储存（web储存）

     由于cookie的大小只有4KB。不能满足目前的需求。出现了localStorage和sessionStorage。他们的功能基本相同。

    

     javacript代码

    localStorage.setItem('user','Lee');
    localStorage.getItem('user');
    localStorage.removeItem('user');

     通过对cookie的封装，加深了对javascript面向对象的理解。同时复习了正则表达式的相关知识。对于字符串的处理，利用正则表达式将会方便很多。