转自: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. zabbix如何实现微信报警 转载

    现实生产环境中,我们通常使用邮件和短信接受zabbix报警信息,但是邮件经常被工作人员搁置在角落中甚至被设置为垃圾邮件被过滤掉.公司的短信接口又太贵,复杂环境中使用短息报警会使运维成本增加很多.微信提 ...

  2. 10 个迅速提升你 Git 水平的提示【转】

    转自:https://www.oschina.net/translate/10-tips-git-next-level 最近我们推出了两个教程:熟悉Git的基本功能和让你在开发团队中熟练的使用Git  ...

  3. freemarker为null处理

    http://599073210-qq-com.iteye.com/blog/1401731

  4. Oracle之主键的创建、添加、删除操作

    一.创建表的同时创建主键约束 1.1.无命名 SQL)); Table created SQL> select table_name,index_name from user_indexes w ...

  5. 在Ecshop后台打印订单页面将商品按货号排序

    ECSHOP后台管理里的“打印订单" 页面里的商品排序有点乱,现在想改成按序号来排序,修改方法如下 下面是在2.7.2基础上做的修改 打开 admin/order.php  文件 找到(大约 ...

  6. python:用json把字典序列化到文件中

    #写程序最好是dump一次和load一次,可以存好几个文件 import json info={'name':'Tom', 'age':'12', 'job':'work',} f=open('fil ...

  7. hdu 1061 Rightmost Digit

    解决本题使用数学中的快速幂取余: 该方法总结挺好的:具体参考http://www.cnblogs.com/PegasusWang/archive/2013/03/13/2958150.html #in ...

  8. Labeling Balls 分类: POJ 2015-07-28 19:47 10人阅读 评论(0) 收藏

    Labeling Balls Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 11893 Accepted: 3408 Descr ...

  9. TSP问题

    之前写过一道类似的题目,Uva 1347. http://www.cnblogs.com/TreeDream/p/5981535.html 这个题目和TSP问题已经很接近了,只是描述的奇奇怪怪的,从最 ...

  10. pip命令使用国内pypi镜像源加速在线安装

    参考:http://www.cnblogs.com/yudar/p/4444097.html 用easy_install和pip来安装第三方库很方便 它们的原理其实就是从Python的官方源pypi. ...