Home思洋影视事业部网站建设知识库
0 Comments

客户端数据存储机制cookie

发布于：2012-11-17  |   作者：广州网站建设  |   已聚集：人围观
客户端数据存储机制cookie

在实际的Web应用中经常需要在客户端存储一些客户信息，一方面是为了改善用户体验（如存储访问密码、历史表单信息），另一方面有效地减轻了服务器数据读取压力。访问者在第一次访问页面时设置cookie变量是存储在客户端计算机中，当下次浏览器请求某个页面时，就可以读取cookie中存储的值，从而实现客户端数据存取。

下面将通过一个例子展示一个客户端数据存储的实际应用，执行流程如下：    广州网站建设

（1）创建一个存储访问者名字的cookie；

（2）当访问者首次访问网站时，访问者会被要求填写姓名信息，该姓名信息会存储于cookie中；

（3）当访问者再次访问网站时浏览器会显示欢迎词信息。    广州网站建设

1．在JavaScript创建cookie

创建一个可在cookie变量中存储访问者姓名的函数，代码如下：



    
	
  1. 
		function setCookie(c_name,value,expiredays)  
    2. 
	
  2. 
		{    
    3. 
	
  3. 
		  var exdate=new Date()                         //实例化日期变量  
    4. 
	
  4. 
		  exdate.setDate(exdate.getDate()+expiredays)   //设置日期变量  
    5. 
	
  5. 
		  document.cookie=c_name+ "=" +escape(value)+  
    6. 
	
  6. 
		   ((expiredays==null) ? "" : ";expires="+exdate.toGMTString())  
    7. 
	
  7. 
		}  
    8. 




	【代码解读】     广州网站建设



	setCookie()函数的功能是设置cookie的名称、值及失效时间。首先将获取当前的日期转换为有效的日期，然后设置cookie名称、值及失效时间，并将该值存入document.cookie对象。



	2．从JavaScript取回cookie的值



	从JavaScript取回cookie的值，创建读取客户端cookie值的函数，同时判断当前cookie的状态。代码如下：    广州网站建设




    
	
  1. 
		function getCookie(c_name)  
    2. 
	
  2. 
		{  
    3. 
	
  3. 
		if (document.cookie.length>0)                   //判断当前cookie是否为空  
    4. 
	
  4. 
		  {  
    5. 
	
  5. 
		  c_start=document.cookie.indexOf(c_name + "=")  
    6. 
	
  6. 
		  if (c_start!=-1)  
    7. 
	
  7. 
		    {   
    8. 
	
  8. 
		    c_startc_start=c_start + c_name.length+1   
    9. 
	
  9. 
		    c_end=document.cookie.indexOf(";",c_start)  
    10. 
	
  10. 
		    if (c_end==-1) c_end=document.cookie.length  
    11. 
	
  11. 
		    return unescape(document.cookie.substring(c_start,c_end)) //返回客户端cookie的值  
    12. 
	
  12. 
		    }  
    13. 
	
  13. 
		  }  
    14. 
	
  14. 
		return ""  
    15. 
	
  15. 
		}  
    16. 




	【代码解读】    广州网站设计



	getCookie()函数首先会判断document.cookie对象中是否存有cookie。如果document.cookie对象存有某些cookie值，那么会继续检查指定的cookie是否已储存。如果满足判断条件就返回cookie存储值，否则返回空字符串。



	3．JavaScript流程控制



	当完成了cookie的创建和读取之后，需要创建一个流程控制函数。这个函数的作用是，如果cookie已设置，则显示欢迎词，否则显示提示框要求用户输入名字。




    
	
  1. 
		function checkCookie() {  
    2. 
	
  2. 
		username=getCookie('username')                  //获得cookie中的用户名变量  
    3. 
	
  3. 
		    if (username != null && username != "") {  
    4. 
	
  4. 
		        alert('Welcome again '+username+'!')    //弹出欢迎信息  
    5. 
	
  5. 
		    } else {  
    6. 
	
  6. 
		  username=prompt('Please enter your name:',"")  
    7. 
	
  7. 
		    
    8. 
	
  8. 
		        if (username != null && username != "") {  
    9. 
	
  9. 
		            setCookie('username',username,365)  //设置cookie  
    10. 
	
  10. 
		        }  
    11. 
	
  11. 
		    }  
    12. 
	
  12. 
		}  
    13. 




	 

客户端数据存储示例的完整代码如下：    

广州网站设计


    
	
  1. 
		<html> 
    2. 
	
  2. 
		    <head> 
    3. 
	
  3. 
		    <script type="text/javascript"> 
    4. 
	
  4. 
		    function getCookie(c_name)                              //获得cookie  
    5. 
	
  5. 
		    {  
    6. 
	
  6. 
		    if (document.cookie.length>0)  
    7. 
	
  7. 
		      {  
    8. 
	
  8. 
		      c_start=document.cookie.indexOf(c_name + "=")  
    9. 
	
  9. 
		      if (c_start!=-1)  
    10. 
	
  10. 
		        {   
    11. 
	
  11. 
		        c_startc_start=c_start + c_name.length+1   
    12. 
	
  12. 
		        c_end=document.cookie.indexOf(";",c_start)  
    13. 
	
  13. 
		        if (c_end==-1) c_end=document.cookie.length  
    14. 
	
  14. 
		        return unescape(document.cookie.substring(c_start,c_end))                                                           //返回客户端cookie的值  
    15. 
	
  15. 
		        }   
    16. 
	
  16. 
		      }  
    17. 
	
  17. 
		    return ""  
    18. 
	
  18. 
		    }  
    19. 
	
  19. 
		      
    20. 
	
  20. 
		    function setCookie(c_name,value,expiredays) //设置cookie  
    21. 
	
  21. 
		    {  
    22. 
	
  22. 
		    var exdate=new Date()  
    23. 
	
  23. 
		    exdate.setDate(exdate.getDate()+expiredays)  
    24. 
	
  24. 
		    document.cookie=c_name+ "=" +escape(value)+  
    25. 
	
  25. 
		    ((expiredays==null) ? "" : ";expires="+exdate.toGMTString())  
    26. 
	
  26. 
		    }  
    27. 
	
  27. 
		      
    28. 
	
  28. 
		    function checkCookie()                          //检查cookie  
    29. 
	
  29. 
		    {  
    30. 
	
  30. 
		    username=getCookie('username')  
    31. 
	
  31. 
		    if (username!=null && username!="")  
    32. 
	
  32. 
		      {alert('Welcome again '+username+'!')}        //弹出欢迎信息  
    33. 
	
  33. 
		    else   
    34. 
	
  34. 
		      {  
    35. 
	
  35. 
		      username=prompt('Please enter your name:',"")  
    36. 
	
  36. 
		      if (username!=null && username!="")  
    37. 
	
  37. 
		        {  
    38. 
	
  38. 
		        setCookie('username',username,365)          //重置cookie值  
    39. 
	
  39. 
		        }  
    40. 
	
  40. 
		      }  
    41. 
	
  41. 
		    }  
    42. 
	
  42. 
		    </script> 
    43. 
	
  43. 
		    </head> 
    44. 
	
  44. 
		    <body onLoad="checkCookie()"> 
    45. 
	
  45. 
		    </body> 
    46. 
	
  46. 
		</html> 
    47. 



			

			

					 标签：
					 
			

		
		
			  
	  
 
	

	 
	

	





	
	



飞机