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面向对象的理解。同时复习了正则表达式的相关知识。对于字符串的处理，利用正则表达式将会方便很多。