js使用cookies的例子

转载 2015年07月08日 21:32:04

通常cookie和session,是web开发中用于存储信息的对象,session存在于服务器的内存中,而cookie则是存在客户端,所以js可以直接操作cookie进行信息的存储和读取。

js存放cookie一般的写法,如:document.cookie="userName=admin";,如果是多个键值对:document.cookie="userName=admin; userPass=123"; 

下面是js操作cookie保存用户的登录信息:

[html] view plaincopy在CODE上查看代码片派生到我的代码片
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title>无标题文档</title>  
  6. <script language="javascript" type="text/javascript">  
  7. function addCookie(name,value,days,path){   /**添加设置cookie**/  
  8.     var name = escape(name);  
  9.     var value = escape(value);  
  10.     var expires = new Date();  
  11.     expires.setTime(expires.getTime() + days * 3600000 * 24);  
  12.     //path=/,表示cookie能在整个网站下使用,path=/temp,表示cookie只能在temp目录下使用  
  13.     path = path == "" ? "" : ";path=" + path;  
  14.     //GMT(Greenwich Mean Time)是格林尼治平时,现在的标准时间,协调世界时是UTC  
  15.     //参数days只能是数字型  
  16.     var _expires = (typeof days) == "string" ? "" : ";expires=" + expires.toUTCString();  
  17.     document.cookie = name + "=" + value + _expires + path;  
  18. }  
  19. function getCookieValue(name){  /**获取cookie的值,根据cookie的键获取值**/  
  20.     //用处理字符串的方式查找到key对应value  
  21.     var name = escape(name);  
  22.     //读cookie属性,这将返回文档的所有cookie  
  23.     var allcookies = document.cookie;         
  24.     //查找名为name的cookie的开始位置  
  25.     name += "=";  
  26.     var pos = allcookies.indexOf(name);      
  27.     //如果找到了具有该名字的cookie,那么提取并使用它的值  
  28.     if (pos != -1){                                             //如果pos值为-1则说明搜索"version="失败  
  29.         var start = pos + name.length;                  //cookie值开始的位置  
  30.         var end = allcookies.indexOf(";",start);        //从cookie值开始的位置起搜索第一个";"的位置,即cookie值结尾的位置  
  31.         if (end == -1) end = allcookies.length;        //如果end值为-1说明cookie列表里只有一个cookie  
  32.         var value = allcookies.substring(start,end); //提取cookie的值  
  33.         return (value);                           //对它解码        
  34.     }else{  //搜索失败,返回空字符串  
  35.         return "";  
  36.     }  
  37. }  
  38. function deleteCookie(name,path){   /**根据cookie的键,删除cookie,其实就是设置其失效**/  
  39.     var name = escape(name);  
  40.     var expires = new Date(0);  
  41.     path = path == "" ? "" : ";path=" + path;  
  42.     document.cookie = name + "="+ ";expires=" + expires.toUTCString() + path;  
  43. }  
  44.   
  45. /**实现功能,保存用户的登录信息到cookie中。当登录页面被打开时,就查询cookie**/  
  46. window.onload = function(){  
  47.     var userNameValue = getCookieValue("userName");  
  48.     document.getElementById("txtUserName").value = userNameValue;  
  49.     var userPassValue = getCookieValue("userPass");  
  50.     document.getElementById("txtUserPass").value = userPassValue;  
  51. }  
  52.   
  53. function userLogin(){   /**用户登录,其中需要判断是否选择记住密码**/  
  54.     //简单验证一下  
  55.     var userName = document.getElementById("txtUserName").value;  
  56.     if(userName == ''){  
  57.         alert("请输入用户名。");  
  58.         return;  
  59.     }  
  60.     var userPass = document.getElementById("txtUserPass").value;  
  61.     if(userPass == ''){  
  62.         alert("请输入密码。");  
  63.         return;  
  64.     }  
  65.     var objChk = document.getElementById("chkRememberPass");  
  66.     if(objChk.checked){  
  67.         //添加cookie  
  68.         addCookie("userName",userName,7,"/");  
  69.         addCookie("userPass",userPass,7,"/");  
  70.         alert("记住了你的密码登录。");  
  71.         window.location.href = "http://www.baidu.com";  
  72.     }else{  
  73.         alert("不记密码登录。");  
  74.         window.location.href = "http://www.baidu.com";  
  75.     }  
  76. }  
  77. </script>  
  78. </head>  
  79. <body>  
  80. <center>  
  81.     <table width="400px" height="180px" cellpadding="0" cellspacing="0" border="1" style="margin-top:100px;">  
  82.         <tr>  
  83.             <td align="center" colspan="2">欢迎使用XXX管理系统</td>  
  84.         </tr>  
  85.         <tr>  
  86.             <td align="right">  
  87.                 <label>用户名:</label>  
  88.             </td>  
  89.             <td align="left">  
  90.                 <input type="text" id="txtUserName" name="txtUserName" style="width:160px; margin-left:10px;" />  
  91.             </td>  
  92.         </tr>  
  93.         <tr>  
  94.             <td align="right">  
  95.                 <label>密  码:</label>  
  96.             </td>  
  97.             <td align="left">  
  98.                 <input type="password" id="txtUserPass" name="txtUserPass" style="width:160px; margin-left:10px;" />  
  99.             </td>  
  100.         </tr>  
  101.         <tr>  
  102.             <td align="center" colspan="2">  
  103.                 <span style="font-size:12px; color:blue; vertical-align:middle;">是否记住密码</span>  
  104.                 <input type="checkbox" id="chkRememberPass" name="chkRememberPass" style="vertical-align:middle;" />  
  105.             </td>  
  106.         </tr>  
  107.         <tr>  
  108.             <td align="center" colspan="2">  
  109.                 <input type="submit" id="subLogin" name="subLogin" value="登 录" onclick="userLogin()"/>  
  110.                       
  111.                 <input type="reset" id="resetLogin" name="resetLogin" value="重 置" />  
  112.             </td>  
  113.         </tr>  
  114.     </table>  
  115. </center>  
  116. </body>  
  117. </html>  

相关文章推荐

JS 读写Cookies标准例子

//清空cookie function Clear_Cookies() {     var exp = new Date();     exp.setTime(exp.getTime() - 1...
  • lybwwp
  • lybwwp
  • 2014年04月25日 09:11
  • 823

GA.js分析——Cookies的使用

译自:http://www.gapremium.com/2012/01/what-cookies-does-google-analytics-use/#.U36pidKSwcY Google...
  • xeseo
  • xeseo
  • 2014年05月23日 09:51
  • 1367

js操作cookies

  • 2010年04月14日 15:35
  • 4KB
  • 下载

js的Cookies库

  • 2011年01月25日 11:12
  • 2KB
  • 下载

初识 js Cookies

什么是cookie? cookie 是存储于访问者的计算机中的变量。每当同一台计算机通过浏览器请求某个页面时,就会发送这个 cookie。你可以使用 JavaScript 来创建和取回 cook...

jquery.cookies.js

  • 2014年12月26日 16:57
  • 7KB
  • 下载

js操作cookies类

  • 2011年08月12日 16:46
  • 16KB
  • 下载

asp +js + cookies、实现简单购物车流程

asp制作购物车的功能,实现方法有好多种一般都会用cookies,session,table等,各种方法都有各自的好处与不足,那就要看自己适用哪种了。这里我就用cookies。 1.加入购物车JS函...

js 特效 html 特效 集成Cookies

  • 2011年08月17日 20:54
  • 18KB
  • 下载

jquery.cookies.2.2.0.min.js

  • 2011年12月19日 09:16
  • 5KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:js使用cookies的例子
举报原因:
原因补充:

(最多只允许输入30个字)