Cookie—客户端存储数据技术

     在项目中,有一个功能是这样的,前端页面设计中,我们有一个后退操作,保证回退之后依然存在之前设定的信息,其实实现这个的功能的方式有很多,例如我们可以采用回退过程携带参数,也可以页面加载显示隐藏的信息,这些在以往的系统实现过程中都已经应用过了,今天采用一种新的方式,Cooike方式,我们将信息保存到Cookie中,不管是回退还是随便跳转到任何一个之前的页面都可以从Cookie中获取相应的值,然后进行显示到页面上。Cookie存储数据采用“名-值”对儿的方式进行,将数据存入Cookie采用setCookie(name,value)形式,如下,例如将姓名放入到Cookie中:setCookie("userName",userName);将数据从Cookie中取出采用getCookie(name,value)形式,如下,将考试名称从Cookie中取出: userName = getCookie("userName");

    下面我们写一个js文件来保存Cookie和获取Cookie以及删除Cookie:CookieHead.js

/**
 * 设置Cookie函数
 * name:Cookie的名称
 * value:Cookie的值
 * expires:设置失效时间
 */
function setCookie(name,value){
	var Days=30*12;
	var expires=new Date();
	expires.setTime(expires.getTime()+Days*24*60*6*1000);
	document.cookie=name+"="+escape(value)+";expires="+expires.toGMTString();
}
/**
 * 获取Cookie函数
 * name:Cookie的名称
 */
function getCookie(name){  
    var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)"));  
    if(arr != null){  
     return unescape(arr[2]);   
    }else{  
     return null;  
    }  
}
/**
 * 删除Cookie
 * @param name
 * 当前时间为失效时间
 */
function delCookie(name){  
    var exp = new Date();  //当前时间  
    exp.setTime(exp.getTime() - 1);  
    var cval=getCookie(name);  
    if(cval!=null) document.cookie= name + "="+cval+";expires="+exp.toGMTString();  
}

    以上就是对于Cookie保存客户端数据进行的一个简单应用,现在我们从根本上来接触Cookie,Cookie和Session不同,属于客户端进行保存特定数据的一种技术,如果我们将信息保存到浏览器中的Cookie中,当我们再次进入的时候浏览器会自动识别我们的信息,比如服务器在客户端保存用户的登录信息,比如登录名和密码,这些信息的数据量并不会很大,服务器端需要的时候可以从已经保存到的客户端进行读取,然后将信息传回到客户端。下面是一个Cookie传送的示意图:

    使用Cookie是存在生命周期的,Cookie一般只存在于页面端,所有,一旦我们的浏览器页面关闭,Cookie也就随机消失了,当然了,如果不关闭浏览器页面,如果超过设置的Cookie的存活时间,Cookie也会自动消失。

    使用Cookie的好处一点是Cookie存在生命周期,我们自动设置生命周期的长短来决定会话保存的时间。另外Cookie是一种客户端技术,不需要服务器端的资源,由客户端直接发送给服务器直接读取,增加了数据传送的效率。当然,任何一种技术的出现都会存在一定的危险,Cookie也不例外,首先一些浏览器对Cookie的字节大小进行了限制,还有就是篡改Cookie对我们的计算机和程序都存在安全性的威胁,所以使用Cookie一定要权衡利弊。



  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 9
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 9
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值