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


Posted in Javascript onMay 30, 2019

本文实例讲述了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中数组的sort()方法的使用介绍
Dec 18 Javascript
jquery live()重复绑定的解决方法介绍
Jan 03 Javascript
Iframe 自动适应页面的高度示例代码
Feb 26 Javascript
jQuery简单实现仿京东商城的左侧菜单效果代码
Sep 09 Javascript
js实现String.Fomat的实例代码
Sep 02 Javascript
JS实现title标题栏文字不间断滚动显示效果
Sep 07 Javascript
JS实现图片垂直居中显示小结
Dec 13 Javascript
vue开发调试神器vue-devtools使用详解
Jul 13 Javascript
JavaScript函数、闭包、原型、面向对象学习笔记
Sep 06 Javascript
js的新生代垃圾回收知识点总结
Aug 22 Javascript
Chrome插件开发系列一:弹窗终结者开发实战
Oct 02 Javascript
el-table-column 内容不自动换行的解决方法
Aug 14 Vue.js
详解vue 动态加载并注册组件且通过 render动态创建该组件
May 30 #Javascript
Vue使用axios出现options请求方法
May 30 #Javascript
vue动态注册组件实例代码详解
May 30 #Javascript
实用的Vue开发技巧
May 30 #Javascript
vue-router的两种模式的区别
May 30 #Javascript
详解小程序中h5页面onShow实现及跨页面通信方案
May 30 #Javascript
JS通过ajax + 多列布局 + 自动加载实现瀑布流效果
May 30 #Javascript
You might like
PHP 调试工具Debug Tools
2011/04/30 PHP
PHP扩展CURL的用法详解
2014/06/20 PHP
php数组添加与删除单元的常用函数实例分析
2015/02/16 PHP
PHP解密Unicode及Escape加密字符串
2015/05/17 PHP
SCP远程VPS快速搬家和WDCP升级php5.3安装memcached和eaccelerator教程
2017/07/27 PHP
PHP实现常用排序算法的方法
2020/02/05 PHP
jQuery学习2 选择器的使用说明
2010/02/07 Javascript
IFrame跨域高度自适应实现代码
2012/08/16 Javascript
用js判断页面是否加载完成实现代码
2012/12/11 Javascript
学习JavaScript图片预加载模块
2016/11/07 Javascript
BootStrap select2 动态改变值的方法
2017/02/10 Javascript
jQuery Validate 校验多个相同name的方法
2017/05/18 jQuery
vue-router单页面路由
2017/06/17 Javascript
荐书|您有一份JavaScript书单待签收
2017/07/21 Javascript
React Native react-navigation 导航使用详解
2017/12/01 Javascript
基于vue+element实现全局loading过程详解
2020/07/10 Javascript
简介Django中内置的一些中间件
2015/07/24 Python
Python读取Json字典写入Excel表格的方法
2018/01/03 Python
使用Python对微信好友进行数据分析
2018/06/27 Python
Python使用pickle模块实现序列化功能示例
2018/07/13 Python
Python学习笔记之自定义函数用法详解
2019/06/08 Python
Python 一键获取百度网盘提取码的方法
2019/08/01 Python
在Ubuntu 20.04中安装Pycharm 2020.1的图文教程
2020/04/30 Python
Python基于gevent实现文件字符串查找器
2020/08/11 Python
pycharm2020.2 配置使用的方法详解
2020/09/16 Python
PHP如何调用MYSQL存储过程
2014/05/30 面试题
vue 中 get / delete 传递数组参数方法
2021/03/23 Vue.js
电大学习个人自我评价范文
2013/10/04 职场文书
前台文员的岗位职责
2013/11/14 职场文书
装修五一活动策划案
2014/01/23 职场文书
幼儿园小班教学反思
2014/02/02 职场文书
幼儿园秋季开学寄语
2014/08/02 职场文书
社区志愿者活动方案
2014/08/18 职场文书
学校做一个有道德的人活动方案
2014/08/23 职场文书
院系推荐意见
2015/06/05 职场文书
2019个人工作计划书的格式及范文!
2019/07/04 职场文书