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

更新时间：2019年05月30日 10:34:42 作者：常驻客

这篇文章主要介绍了JS使用cookie保存用户登录信息操作,结合具体实例形式分析了javascript使用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程序设计有所帮助。

您可能感兴趣的文章:

微前端qiankun沙箱实现源码解读
这篇文章主要为大家介绍了微前端qiankun沙箱实现的源码解读，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-06-06
微信小程序去哪里找小程序到底如何使用(附小程序名单)
今天凌晨，微信负责人张小龙在微信朋友圈晒出了一组图，网友看到纷纷“炸裂”，这到底是什么？是的，微信小程序如约上线，微信小程序怎么打开，微信小程序在哪里进入，请阅读本文
2017-01-01
JS+JSP checkBox 全选具体实现
本文为大家介绍下使用JS+JSP实现checkBox全选，下面有个不错的示例，感兴趣的朋友可以参考下
2014-01-01
JS匿名函数类生成方式实例分析
这篇文章主要介绍了JS匿名函数类生成方式,结合实例形式分析了javascript匿名函数类相关属性与方法定义与使用技巧,需要的朋友可以参考下
2016-11-11
window.location和document.location的区别分析
用户不能改变document.location(因为这是当前显示文档的位置)。但是,可以改变window.location (用其它文档取代当前文档)window.location本身也是一个对象,而document.location不是对象
2008-12-12
关于预加载InstantClick的问题解决方法
本篇文章主要介绍了关于预加载InstantClick的问题解决方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-09-09
微信小程序如何获取网络状态
这篇文章主要介绍了微信小程序如何获取网络状态,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2019-07-07
微信小程序调用天气接口并且渲染在页面过程详解
这篇文章主要介绍了微信小程序调用天气接口并且渲染在页面过程详解，今天写一个具体的例子，调用一个免费的天气接口的api，并且把所获取的内容展示在前端的界面，前端界面与 iView Weapp结合,需要的朋友可以参考下
2019-06-06
JS控件bootstrap suggest plugin使用方法详解
这篇文章主要介绍了JS控件bootstrap suggest plugin的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-03-03
解决ueditor jquery javascript 取值问题
这篇文章主要介绍了解决ueditor jquery javascript 取值问题,需要的朋友可以参考下
2014-12-12