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>  

几个实用的例子——Cookie读写详解

Cookie简介 Cookie的引文原意是“点心”,它是在客户端访问Web服务器时,服务器在鹅湖段硬盘上存放的信息,好像是服务器发送给客户的“点心”。服务器可以根据Cookie来跟踪客户状态,这对于...
  • Goskalrie
  • Goskalrie
  • 2016年04月20日 17:50
  • 6917

JS 读写Cookies标准例子

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

WebView中的Cookies问题

一、如何同步Http请求的cookies到WebView中
  • Z18789231876
  • Z18789231876
  • 2014年10月21日 17:28
  • 1504

JS cookies 使用笔记

增加cookie:document.cookie = name+"=?;expires=?;path=/";     其中expires表示过期时间;一般使用: var date = new Date...
  • ywhxy1
  • ywhxy1
  • 2016年04月18日 18:19
  • 59

Cookie使用实例

一个在登陆中使用Cookie的实际例子 首先是一个登陆页面 ">
  • ch717828
  • ch717828
  • 2015年03月31日 08:40
  • 508

JS 中 cookies 的使用

//写cookies function setCookie(name, value) { var Days = 30; ...
  • HookBin
  • HookBin
  • 2016年03月31日 20:25
  • 155

js和SpringMvc灵活使用cookie

cookie是字符串而且还是一个特定格式的文本字符串
  • a3025056
  • a3025056
  • 2016年10月10日 17:23
  • 1210

正则表达式入门(js例子)

网上的正则表达式教程多种多样,不过大多是都是直接贴出来正则的一些语法,可能会让大多数刚刚接触到正则的然摸不着头脑。。。 比如js的 test()方法怎么使用正则表达式那,php那些正则函数怎么使用都是...
  • u014017080
  • u014017080
  • 2016年11月23日 16:26
  • 1583

angularjs cookie 操作

$cookiesProvider 使用$cookiesProvider改变$cookies服务的默认行为。 默认属性 path:字符串,cookies只在这个路径及其子路径可用。默认...
  • u010874036
  • u010874036
  • 2016年06月21日 09:27
  • 1341

js遍历所有cookie

var aCookie = document.cookie.split(";"); var re = ''; for (var i = 0; i < aCookie.length; i...
  • dannywj1371
  • dannywj1371
  • 2014年06月27日 12:08
  • 6965
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:js使用cookies的例子
举报原因:
原因补充:

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