转自：http://blog.csdn.net/zyujie/article/details/8727828 （ 谢谢博主了）

js操作cookie，实现登录密码保存。cookie的存放方式是以键值对的方式保存的。

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

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

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

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>无标题文档</title>

 <script language="javascript" type="text/javascript">

 function addCookie(name,value,days,path){    /**添加设置cookie**/

     var name = escape(name);

     var value = escape(value);

     var expires = new Date();

     expires.setTime(expires.getTime() + days * 3600000 * 24);

     //path=/，表示cookie能在整个网站下使用，path=/temp，表示cookie只能在temp目录下使用

     path = path == "" ? "" : ";path=" + path;

     //GMT(Greenwich Mean Time)是格林尼治平时，现在的标准时间，协调世界时是UTC

     //参数days只能是数字型

     var _expires = (typeof days) == "string" ? "" : ";expires=" + expires.toUTCString();

     document.cookie = name + "=" + value + _expires + path;

 }

 function getCookieValue(name){    /**获取cookie的值，根据cookie的键获取值**/

     //用处理字符串的方式查找到key对应value

     var name = escape(name);

     //读cookie属性，这将返回文档的所有cookie

     var allcookies = document.cookie;

     //查找名为name的cookie的开始位置

     name += "=";

     var pos = allcookies.indexOf(name);

     //如果找到了具有该名字的cookie，那么提取并使用它的值

     if (pos != -1){                                             //如果pos值为-1则说明搜索"version="失败

         var start = pos + name.length;                  //cookie值开始的位置

         var end = allcookies.indexOf(";",start);        //从cookie值开始的位置起搜索第一个";"的位置,即cookie值结尾的位置

         if (end == -1) end = allcookies.length;        //如果end值为-1说明cookie列表里只有一个cookie

         var value = allcookies.substring(start,end); //提取cookie的值

         return (value);                           //对它解码

     }else{    //搜索失败，返回空字符串

         return "";

     }

 }

 function deleteCookie(name,path){    /**根据cookie的键，删除cookie，其实就是设置其失效**/

     var name = escape(name);

     var expires = new Date(0);

     path = path == "" ? "" : ";path=" + path;

     document.cookie = name + "="+ ";expires=" + expires.toUTCString() + path;

 }

 /**实现功能，保存用户的登录信息到cookie中。当登录页面被打开时，就查询cookie**/

 window.onload = function(){

     var userNameValue = getCookieValue("userName");

     document.getElementById("txtUserName").value = userNameValue;

     var userPassValue = getCookieValue("userPass");

     document.getElementById("txtUserPass").value = userPassValue;

 }

 function userLogin(){    /**用户登录，其中需要判断是否选择记住密码**/

     //简单验证一下

     var userName = document.getElementById("txtUserName").value;

     if(userName == ''){

         alert("请输入用户名。");

         return;

     }

     var userPass = document.getElementById("txtUserPass").value;

     if(userPass == ''){

         alert("请输入密码。");

         return;

     }

     var objChk = document.getElementById("chkRememberPass");

     if(objChk.checked){

         //添加cookie

         addCookie("userName",userName,7,"/");

         addCookie("userPass",userPass,7,"/");

         alert("记住了你的密码登录。");

         window.location.href = "http://www.baidu.com";

     }else{

         alert("不记密码登录。");

         window.location.href = "http://www.baidu.com";

     }

 }

 </script>

 </head>

 <body>

 <center>

     <table width="400px" height="180px" cellpadding="0" cellspacing="0" border="1" style="margin-top:100px;">

         <tr>

             <td align="center" colspan="2">欢迎使用XXX管理系统</td>

         </tr>

         <tr>

             <td align="right">

                 <label>用户名：</label>

             </td>

             <td align="left">

                 <input type="text" id="txtUserName" name="txtUserName" style="width:160px; margin-left:10px;" />

             </td>

         </tr>

         <tr>

             <td align="right">

                 <label>密  码：</label>

             </td>

             <td align="left">

                 <input type="password" id="txtUserPass" name="txtUserPass" style="width:160px; margin-left:10px;" />

             </td>

         </tr>

         <tr>

             <td align="center" colspan="2">

                 <span style="font-size:12px; color:blue; vertical-align:middle;">是否记住密码</span>

                 <input type="checkbox" id="chkRememberPass" name="chkRememberPass" style="vertical-align:middle;" />

             </td>

         </tr>

         <tr>

             <td align="center" colspan="2">

                 <input type="submit" id="subLogin" name="subLogin" value="登 录" onclick="userLogin()"/>

                 &nbsp;&nbsp;&nbsp;&nbsp;

                 <input type="reset" id="resetLogin" name="resetLogin" value="重 置" />

             </td>

         </tr>

     </table>

 </center>

 </body>

 </html>

js操作cookie，实现登录密码保存 [转]的更多相关文章

  1. jquery.cookie.js 操作cookie实现记住密码功能的实现代码

    jquery.cookie.js操作cookie实现记住密码功能,很简单很强大,喜欢的朋友可以参考下.   复制代码代码如下: //初始化页面时验证是否记住了密码 $(document).ready( ...

  2. jquery.cookie.js操作cookie实现“记住密码”，很简单很强大

    //初始化页面时验证是否记住了密码 $(document).ready(function() { if ($.cookie("rmbUser") == "true&quo ...

  3. 记住密码功能 JS结合JQuery 操作 Cookie 实现记住密码和用户名！

    // 记住密码功能 JS结合JQuery 操作 Cookie 实现记住密码和用户名! var username = document.getElementById("username&quo ...

  4. 转： js操作cookie

    cookie的几个概念 http://dearhappyfish.blog.163.com/blog/static/1901094152012422114753777/ js操作cookie 转:ht ...

  5. 使用纯生js操作cookie

    前段时间做项目的时候要使用js操作cookie,jquery也有相应的插件,不过还是觉得纯生的js比较好,毕竟不依赖jq. //获得coolie 的值 function cookie(name) { ...

  6. js操作cookie(转载：经测试可用)

    /***js操作cookie,star***/ function addCookie(objName,objValue,objsec){//添加cookie  var str = objName + ...

  7. 分步引导中，Js操作Cookie，实现判断用户是否第一次登陆网站

    上一篇介绍了分布引导插件IntroJs的使用,本篇介绍通过Js操作cookie的方法. 分步引导的功能只适合与第一次登陆网站的新用户,不能每次登陆都提示分布引导,那么如何判断用户是否第一次登录网站呢? ...

  8. JS操作cookie以及本地存储（sessionStorage 和 localStorage ）

    JS操作cookie cookie的操作用两种方式 1.substring //创建cookie function setCookie(name,value,expires,path,domain,s ...

  9. jquery.cookie 使用文档，$.cookie() 文档教程， js 操作 cookie 教程文档。

    jquery.cookie 使用文档,$.cookie() 文档教程, js 操作 cookie 教程文档. jquery.cookie中的操作: jquery.cookie.js是一个基于jquer ...

随机推荐

  1. [Android新手区] SQLite 操作详解--SQL语法

    该文章完全摘自转自:北大青鸟[Android新手区] SQLite 操作详解--SQL语法  :http://home.bdqn.cn/thread-49363-1-1.html SQLite库可以解 ...

  2. struts2结果类型

    struts2结果类型: 结果类型 描述 前request域属性是否丢失 1 dispatcher 用于与jsp整合的结果类型.默认结果类型. 2 chain Action链式处理结果类型.前一个Ac ...

  3. Python包管理工具介绍

    常见的包管理工具及关系 setuptools -->distribute easy_install-->pip 1.distribute distribute是对标准库disutils模块 ...

  4. jquery easyui常见问题：

    1.jquery easyui1.4.2 demo在ie10 上加载json的时候没有效果 从官网上下载了jquery easyui1.4.2 里面有个demo文件夹,但是发现底下的demo在IE.3 ...

  5. JAVA导出数据到excel中大数据量的解决方法

    最近在做项目功能时 ,发现有20万以上的数据.要求导出时直接导出成压缩包.原来的逻辑是使用poi导出到excel,他是操作对象集合然后将结果写到excel中. 使用poi等导出时,没有考虑数据量的问题 ...

  6. JavaScript DOM 编程艺术（第2版）读书笔记 (8)

    <!--这章的内容略奇怪啊!可能是因为我之前没有接触过这些知识点,等以后用到的时候再回来翻阅吧,现在先简要介绍一下 js权限已通过,博客园好快的效率啊,谢谢O(∩_∩)O --> 缩略语 ...

  7. Android Webview实现文件下载功能

        在做美图欣赏Android应用的时候,其中有涉及到Android应用下载的功能,这个应用本身其实也比较简单,就是通过WebView控制调用相应的WEB页面进行展示.刚开始以为和普通的文件下载实 ...

  8. Sublime Text2一些快捷键收藏

    快捷键 XP版 Ctrl+P           搜索文件                           Ctrl+R          搜索方法                        ...

  9. 关于Java中的GUI事件处理

    关于事件监听的实现过程通过下面的代码来具体说明: package com.sxt; import java.awt.BorderLayout; import java.awt.event.Action ...

  10. Black Box 分类： POJ 栈和队列 2015-08-05 14:07 2人阅读 评论(0) 收藏

    Black Box Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 8754 Accepted: 3599 Description ...