JS使用cookie保存用户登录信息操作示例

本文实例讲述了JS使用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()"/>
        <input type="reset" id="resetLogin" name="resetLogin" value="重 置" />
      </td>
    </tr>
  </table>
</center>
</body>
</html>

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

赞 (0)

相关推荐

  • javascript cookies 设置、读取、删除实例代码

    刚整理了一些关于javascript cookies操作的文章,发现这篇文章也不错,推荐大家一起参考,选择需要的,不足的地方主要是对路径的设置,喜欢的朋友可以结合下. 复制代码 代码如下: <script> function SetCookie(name,value)//两个参数,一个是cookie的名子,一个是值 { var Days = 30; //此 cookie 将被保存 30 天 var exp = new Date(); //new Date("December 31,

  • JS读取cookies信息(记录用户名)

    首先,在用户提交评论后,让客户端cookies记录相关值,例如:asp下的cookies赋值方式采用下面的这样的语句: 复制代码 代码如下: response.cookies("username")="name" response.cookies("username").expires=Date+30 通过以上asp程序给cookies赋值.如何在静态页html读取这个cookies,并且显示在用户?因为是生成了html,我们无法再利用asp程序

  • 静态页面利用JS读取cookies记住用户信息

    静态页面由于其稳定性快速性,的确给SE.用户及站长带来了方便.但有时,需要记住用户的信息,如用户留下评论后,下一次再来,就要记住该用户的信息,不必再次输入. 这对用户来说,可以提高他们的归属感,熟悉感.如何实现呢?     首先,我们需要在用户提交评论后,给客户端赋予几个相关的cookies值,这个很简单,直接在评论提交页面进行赋值就可以了,asp下的cookies简单赋值方式采用下面的这样的语句: 复制代码 代码如下: response.cookies("username")=&qu

  • 只出现一次的提示信息(js+cookies)

    只出现一次的提示信息 var alertmessage="Welcome to 我们\n 这个提示信息只会出现一次哟!刷新一下页面试试?肯定没有提示了~" var once_per_session=1 function get_cookie(Name) { var search = Name + "=" var returnvalue = ""; if (document.cookie.length > 0) { offset = docu

  • JavaScript使用cookie记录临时访客信息的方法

    本文实例讲述了JavaScript使用cookie记录临时访客信息的方法.分享给大家供大家参考.具体分析如下: 这里用户第一次访问网页时会提示用户输入一个昵称,然后写入cookie,当用户再次来到时会读取cookie信息,提取用户昵称,欢迎用户的到来 <!DOCTYPE html> <html> <head> <script> function getCookie(c_name) { var c_value = document.cookie; var c_

  • JS基于cookie实现来宾统计记录访客信息的方法

    JS基于cookie实现来宾统计记录访客信息的方法

    本文实例讲述了JS基于cookie实现来宾统计记录访客信息的方法.分享给大家供大家参考.具体如下: 这里使用JavaScript记录访客的来宾信息,记录是第几次来访,显示的信息有:您的名字;您浏览该网页的次数;您上次浏览网页的时间.可以更改姓名. 运行效果如下图所示: 具体代码如下: <html> <head> <title>记录客户信息</title> <script language="JavaScript"> <!

  • JS操作Cookies包括(读取添加与删除)

    一直都是简单去js实现cookie的一些操作,今天把js对cookie操作系统的整理了一遍,包括:js读取cookie,js添加cookie,js删除cookie,示例如下: 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http

  • javascript创建cookie、读取cookie

    本文内容分为两个部分进行学习,分别介绍了javascript创建cookie.javascript读取cookie的具体实现方法,供大家学习,具体内容如下 一.创建Cookie document.cookie = 'key=value';  有特殊字符 使用encodeURIComponent() 进行编码 document.cookie = 'user='+encodeURIComponent('郭钱;');  读取时 使用decodeURIComponent() 例如: document.c

  • JS设置cookie、读取cookie、删除cookie

    JavaScript是运行在客户端的脚本,因此一般是不能够设置Session的,因为Session是运行在服务器端的. 而cookie是运行在客户端的,所以可以用JS来设置cookie. 假设有这样一种情况,在某个用例流程中,由A页面跳至B页面,若在A页面中采用JS用变量temp保存了某一变量的值,在B页面的时候,同样需要使用JS来引用temp的变量值,对于JS中的全局变量或者静态变量的生命周期是有限的,当发生页面跳转或者页面关闭的时候,这些变量的值会重新载入,即没有达到保存的效果.解决这个问题

  • JavaScript 利用Cookie记录用户登录信息

    Html代码: 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

  • js读取cookie方法总结

    本文实例总结了js读取cookie方法.分享给大家供大家参考.具体实现方法如下: 一般关于js读取cookie方法有很多,我们下面的实例函数主要是利用split函数来分切,和document.cookie获取所有cookie再利用for遍历所有数组,判断如果cookie名相同,那么这个cookie 就是我们要找的. 方法一 复制代码 代码如下: var acookie=document.cookie.split("; "); function getck(sname) {//获取单个c

随机推荐