CSDN转 cookie的用法

在网站中,我们经常看到每当我们准备登陆时,网页询问我们是否保存用户名和密码,以便下次登陆时不用再次输入。诸如此类的功能如何实现哪？经过两天的研究，终于有了收获！现将我的经验与大家分享。
      在网页中记录用户的信息通常有如下几种方式：Session、Cookie、以及.Net环境下的ViewState等。比较起来，Session将用户的信息暂存在内存中，除非用户关闭网页，否则信息将一直有效。所以，用Session保存的信息很容易丢失。Cookie用来将用户的信息保存到用户机的文件中，这样信息就可以长久的保存。前两种都是传统的保存方式，而ViewState是在微软.Net环境下新推出的一种对象，它其实是一种特殊的Session，不过一般将信息保存在客户端。关于ViewState的用法大家可以参考一些资料，我在《谨慎Asp.net中static变量的用法》一文中也有叙述。
      下面我将以用户名和密码为例介绍如何通过Cookie保存用户的信息。
      因为Cookie是通过计算机上的文件来记录有关信息，所以涉及到对Cookie的操作无外乎读取、赋值和删除。另外，由于Cookie提供了一项有效期的功能，所以还可以对Cookie设置有效期。下面将在DHTML和VS.Net两种环境下分别介绍如何实现Cookie的各种操作。
      一、DHTML环境
      这种环境下我们使用的是传统的JavaScript脚本，通过对页面中各种对象的属性和事件进行操作来完成我们的预期任务。
      1、读取Cookie值
      Cookie值是按照索引存储的，也就是说不同的索引有不同的Cookie值。所以我们就可以将我们想要存储的对象（在这里为用户名）作为索引，读取该存储对象的Cookie值。方法如下：

[html] view plain copy

print?

  1. function GetCookie (name)
  2. {
  3. var arg = name + "=";
  4. var alen = arg.length;
  5. var clen = window.document.cookie.length;
  6. var i = 0;
  7. while (i < clen)
  8. {
  9. var j = i + alen;
  10. if (window.document.cookie.substring(i, j) == arg) return getCookieVal (j);
  11. i = window.document.cookie.indexOf(" ", i) + 1;
  12. if (i == 0)
  13. break;
  14. }
  15. return null;
  16. }
  17. function getCookieVal (offset)
  18. {
  19. var endstr = window.document.cookie.indexOf (";", offset);
  20. if (endstr == -1)
  21. endstr = window.document.cookie.length;
  22. return unescape(window.document.cookie.substring(offset, endstr));
  23. }

为什么读取Cookie值还要两个函数来完成？这是因为Cookie值是按照“Cookie名；”+“Cookie值；”+“有效期；”+“路径”的格式来存储的。这将在下文中提到。这样初次读到的Cookie是一连串的以分号分隔的字符串。我们还需要对其进行进一步处理才能提取出我们想要的信息。在上面两个函数中，第一个函数GetCookie用来按索引获取我们想要读取的Cookie的位置，第二个函数getCookieVal用来提取Cookie中我们想要的信息。所以使用时直接调用GetCookie(name)就可以了，其中name是Cookie的索引，也就是名称，或者直接点说就是我们要存储其值的东西。
      2、设置Cookie值
      正如上面所说，Cookie的存取方式有点类似于哈希表，是以名称作为索引存取的。一个Cookie的格式如下：
Cookie名称（作为Cookie的索引便于以后的各种操作）+“=”+Cookie值+“；expires=+有效期+“；path=”+路径+“；domain=”+域+“；secure=”+安全级别
      可以看出每个Cookie实际有6个属性,这些属性恰好构成了一条记录。多条Cookie记录在硬盘中是以集合的方式存取的。也就是说所有Cookie记录构成了类似于一张表的结构。而Cookie又可以有多个集，那时不是就可以理解成一个库哪？这里不去讲解怎么样以表或库的方式读写Cookie记录集，只是讲解基本的Cookie操作。并且我还没有发现真正有把Cookie集合当成表一样的专门操作方法。毕竟，以表的方式理解Cookie集合只是我的一家之言，仅供大家理解上的方便。
      正因为每个Cookie实际上是有多个属性组成的，所以设置Cookie时理所当然地应该设置多个属性值，虽然不是每一个属性都必须填写，但大家至少应该把Cookie名称和Cookie值填上，否则这个Cookie就没有任何意义了。设置一个Cookie值的方法如下：

[html] view plain copy

print?

  1. function SetCookie (name, value)
  2. {
  3. var exp = new Date();
  4. exp.setTime(exp.getTime() + (30*24*60*60*1000));
  5. window.document.cookie = name + "=" + escape (value) + "; expires=" + exp.toGMTString()+";path=/";
  6. }

其中，name为Cookie的名称，value为Cookie的值。如果还想指定Cookie的有效期，再传入一个时间参数就可以了，不过要注意这里的时间是以毫秒计算的，所以如果要设置日月年等长时间时要进行计算。需要注意的是如果Cookie的名称和值中含有汉字的话，最好事先对其进行编码，否则可能显示结果不会很理想。
　　3、删除Cookie
      这么叫也许并不恰当，因为以下的介绍忠并没有真正的删除Cookie。我们就勉强这么叫吧。上面说每一个Cookie都有一个有效期，过了这个有效期该Cookie就会失效，获取到的Cookie值将为空（null），使用该Cookie的值将会出错。所以如果要删除某个Cookie的话，只要让其过期就可以了。所以删除Cookie的操作就是让其过期的操作：

[html] view plain copy

print?

  1. function DeleteCookie (name)
  2. {
  3. var exp = new Date();
  4. exp.setTime (exp.getTime() - 100);
  5. var cval = GetCookie (name);
  6. window.document.cookie = name + "=" + cval + "; expires=" + exp.toGMTString()+";path=/";
  7. }

有上述代码也可以看出，删除操作其实就是让某个Cookie的有效期设置为当前时间减去1毫秒，当然会过期了！
      那么如何将上述代码应用到DHTML的开发过程中哪？下面就以记录用户名和密码到Cookie中为例进行讲解。
      为了简单起见，我们只在页面中放置一个用户名文本域、一个密码域、一个按钮和一个复选框。页面的布局代码如下：

[html] view plain copy

print?

  1. <html>
  2. <head>
  3. <title>记录用户名和密码到Cookie中</title>
  4. </head>
  5. <body>
  6. 请输入用户名：<input type="text"  id = "username" ><br/>
  7. 请输入密码：<input type="password" id="password">    <input type="checkbox" name = "remember" id="remember"></input>记住密码<br/>
  8. <input value="记录" type="button" onClick="remember()">    <input value="删除" type="button" onClick="DelCookie()">
  9. <input type="button" value="显示cookie" onClick="showpassword()">
  10. </body>
  11. </html>

下面就开始完成功能代码的编写。本来用户单击“确定”按钮后要对用户名和密码进行验证，并且进入相关页面，我们在这里换成记录用户名和密码的功能。
      将上述三个Cookie的函数粘贴到html代码的<head>和</head>之间（不要放在<title>和</title>之间），然后在<input value="记录" type="button">中添加一个单击事件处理程序：<input value="记录" type="button" onClick="remember()">。在<head>和</head>之间实现remember()函数：

[html] view plain copy

print?

  1. function remember()
  2. {
  3. if(document.getElementById("remember").checked){
  4. SetCookie(document.getElementById("username").value,document.getElementById("password").value);
  5. alert("Saved!");
  6. }
  7. }

这样就可以在用户单击了“记录”按钮后将用户名和对应的密码记录到Cookie中。
      那么如何在用户输入用户名后自动填入对应的密码哪？这就要在<input id="username" type="text">中添加一个事件处理函数:<input id="username" type="text" onblur="showpassword()">。然后把showpassword()的定义同样放到<head>和</head>之间：

[html] view plain copy

print?

  1. function showpassword()
  2. {
  3. return GetCookie(document.getElementById("username").value);
  4. }

以上就完成了对特定用户密码的记录。下面我们完成密码的删除部分。在<input value="删除" type="button">中添加一个事件处理函数:<input value="删除" type="button" onClick="DelCookie()">。然后在<head>和</head>之间实现DelCookie()函数：

[html] view plain copy

print?

  1. function DelCookie()
  2. {
  3. DeleteCookie(document.getElementById("username").value);
  4. }

现在大家可以试验一下，看看预期的功能可否实现。如果大家试验过后就会发现，当我们删除掉某个用户的密码后，每次焦点从username中移出时，password中总是显示四个掩码，而不是空，这是为什么哪？如果大家用alert()语句把文本框中的内容输出的话，就会发现那四个掩码其实是“null”这个单词。这就表明其实已经删除了，但我们显示密码时没有排除这种情况。所以在showpassword()函数中应进行判断，非空后再把结果赋给password域：

[html] view plain copy

print?

  1. function showpassword()
  2. {
  3. var p=GetCookie(document.getElementById("username").value);
  4. if(p!=null)
  5. document.getElementById("password").value= p;
  6. }

好了，大功告成。完整的代码如下所示：

[html] view plain copy

print?

  1. <html>
  2. <head>
  3. <title>记录用户名和密码到Cookie中</title>
  4. </head>
  5. <body>
  6. 请输入用户名：<input type="text"  id = "username" onblur="showpassword()"><br/>
  7. 请输入密码：<input type="password" id="password">    <input type="checkbox" name = "remember" id="remember"></input>记住密码<br/>
  8. <input value="记录" type="button" onClick="remember()">    <input value="删除" type="button" onClick="DelCookie()">
  9. <script type="text/javascript">
  10. function GetCookie (name)
  11. {
  12. var arg = name + "=";
  13. var alen = arg.length;
  14. var clen = window.document.cookie.length;
  15. var i = 0;
  16. while (i < clen)
  17. {
  18. var j = i + alen;
  19. if (window.document.cookie.substring(i, j) == arg) return getCookieVal (j);
  20. i = window.document.cookie.indexOf(" ", i) + 1;
  21. if (i == 0)
  22. break;
  23. }
  24. return null;
  25. }
  26. function getCookieVal (offset)
  27. {
  28. var endstr = window.document.cookie.indexOf (";", offset);
  29. if (endstr == -1)
  30. endstr = window.document.cookie.length;
  31. return unescape(window.document.cookie.substring(offset, endstr));
  32. }
  33. function SetCookie (name, value)
  34. {
  35. var exp = new Date();
  36. exp.setTime(exp.getTime() + (30*24*60*60*1000));
  37. window.document.cookie = name + "=" + escape (value) + "; expires=" + exp.toGMTString()+";path=/";
  38. }
  39. function DeleteCookie (name)
  40. {
  41. var exp = new Date();
  42. exp.setTime (exp.getTime() - 100);
  43. var cval = GetCookie (name);
  44. window.document.cookie = name + "=" + cval + "; expires=" + exp.toGMTString()+";path=/";
  45. }
  46. function DelCookie()
  47. {
  48. DeleteCookie(document.getElementById("username").value);
  49. }
  50. function remember()
  51. {
  52. if(document.getElementById("remember").checked){
  53. SetCookie(document.getElementById("username").value,document.getElementById("password").value);
  54. alert("Saved!");
  55. }
  56. }
  57. function showpassword()
  58. {
  59. var p=GetCookie(document.getElementById("username").value);
  60. if(p!=null)
  61. document.getElementById("password").value= p;
  62. }
  63. </script>
  64. </body>
  65. </html>

下面是一个php端使用cookie做的一个简单页面计数器

[php] view plain copy

print?

    1. <?php
    2. session_start();
    3. if(!isset($_COOKIE[‘kookie‘]))
    4. {
    5. $pagecount = 0;
    6. setcookie("kookie",$pagecount);
    7. echo "<center>This is the firest time you hvae accessed this page in this session.</center>";
    8. echo "<center> A cookie was sent to you and stored in your computer.</center>";
    9. }else {
    10. $pagecount  = ++$_COOKIE[‘kookie‘];
    11. setcookie("kookie",$pagecount,time()-10);
    12. setcookie("kookie",$pagecount);
    13. echo "<center>View Count :<b> ".$_COOKIE[‘kookie‘]."</b><center>\n<br>";
    14. }
    15. ?>
    16. <html>
    17. <head>
    18. <title>Page title</title>
    19. </head>
    20. <body>
    21. <center><b>Refresh button will refresh the page and the page count! :-)
    22. <b></center>
    23. </body>
    24. </html>
时间： 2024-08-05 16:06:01

CSDN转 cookie的用法的相关文章

asp.net中Cookie的用法【转】

比如建立一个名为aspcn,值为灌水小鱼的cookieHttpCookie cookie = new HttpCookie["aspcn"];cookie.Value = "灌水小鱼";Response.AppendCookie(cookie);取出Cookie值也很简单HttpCookie cookie = Request.Cookies["aspcn"];cookieValue = cookie.Value;在一个Cookie中储存多个信息,

php中cookie的用法

php中cookie的用法是怎么样的?在php中使用cookie需要注意什么?cookie 是一种在远程浏览器端储存数据并以此来跟踪和识别用户的机制. PHP在http协议的头信息里发送cookie, 因此 setcookie() 函数必须在其它信息被输出到浏览器前调用,这和对 header() 函数的限制类似. 本文转自: http://blog.chinaunix.net/u/27731/showart_259031.html 1.1 设置cookie:     可以用 setcookie(

iOS cookie的用法

在APP开发中,cookie也开始变的越来越重要了.为了更好的切换,注销和登录账户,就必须熟悉cookie的用法.花了点时间把代码整理了一下,注释也都标上了 1,获取cookie获取cookie只能在请求中获取cookie,否则时获取不到的,url就不给出了,大家用自己的url测试一下就行.获取到cookie后把cookie进行归档保存到userDefaults里 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

jquery.cookie.js用法

jQuery.cookie = function(d, c, a) { if ("undefined" != typeof c) { a = a || {}; null === c && (c = "", a = $.extend({}, a), a.expires = -1); a.expires || (a.expires = 1); var b = ""; if (a.expires && ("nu

JavaScript中Cookie的用法

Javascript中Cookie主要存储于客户端的计算机中,用于存放已访问的站点信息,Cookie最大约为4k.以下实例主要用于页面在刷新时保存数据,具体的用法如下所示: <html> <head><title></title> </head> <body> <script type="text/javascript"> window.onload = function () { PersentVal

jquery cookie的用法

jQuery cookie是个很好的cookie插件,大概的使用方法如下example $.cookie(’name’, ‘value’);设置cookie的值,把name变量的值设为valueexample $.cookie(’name’, ‘value’, {expires: 7, path: ‘/’, domain: ‘jquery.com’, secure: true});新建一个cookie 包括有效期 路径 域名等example $.cookie(’name’, ‘value’);新

session和cookie的用法以及区别

------------------------------------------session的使用-------------------------------------- session中同一浏览器同一站点只能有一个session_id,下面我们一起来看看关于session使用方法.如何使用session,凡是与session有关的,之前必须调用函数session_start();为session赋值很简单,如: <?php Session_start(); $Name = "这

jQuery.cookie插件用法自我总结

用的jQuery.cookie -----一个封装好了cookie的插件.(基于jQuery) 我这只需要调用. $.cookie("c_name", c_value,{expires:7}); //可通过alert($.cookie("c_name"));得到你要存储的内容,这样测试cookie是否存储: c_name:要创建的cookie的名字: c_value:值或者说要存储的内容: expires:7存储日期: $.cookie("c_name&q

asp.net中Cookie的用法(转)

比如建立一个名为aspcn,值为灌水小鱼的cookie HttpCookie cookie = new HttpCookie["aspcn"];cookie.Value = "灌水小鱼";Response.AppendCookie(cookie); 取出Cookie值也很简单 HttpCookie cookie = Request.Cookies["aspcn"];cookieValue = cookie.Value; 在一个Cookie中储存多