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 相关文章推荐
WEB页子窗口(showModalDialog和showModelessDialog)使用说明
Oct 25 Javascript
JS分页控件 可用于无刷新分页
Jul 23 Javascript
javascript 获取iframe里页面中元素值的方法
Feb 17 Javascript
JavaScript插件化开发教程 (二)
Jan 27 Javascript
jQuery实现预加载图片的方法
Mar 17 Javascript
js实现每日自动换一张图片的方法
May 04 Javascript
javascript封装 Cookie 应用接口
Aug 07 Javascript
原生JS实现前端本地文件上传
Sep 08 Javascript
详解vue中async-await的使用误区
Dec 05 Javascript
element-ui中dialog弹窗关闭按钮失效的解决
Sep 22 Javascript
vue v-model的用法解析
Oct 19 Javascript
Vue自定义表单内容检查rules实例
Oct 30 Javascript
详解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中Ctype函数用法详解
2014/12/09 PHP
示例详解Laravel的注册重构
2016/08/14 PHP
PHP CURL post数据报错 failed creating formpost data
2016/10/16 PHP
JS location几个方法小姐
2008/07/09 Javascript
JS编程小常识很有用
2012/11/26 Javascript
JavaScript判断手机号运营商是移动、联通、电信还是其他(代码简单)
2015/09/25 Javascript
简单讲解AngularJS的Routing路由的定义与使用
2016/03/05 Javascript
JQuery Mobile 弹出式登录框的实现方法
2016/05/28 Javascript
RequireJS简易绘图程序开发
2016/10/28 Javascript
详解Vue中添加过渡效果
2017/03/20 Javascript
Node.js安装配置图文教程
2017/05/10 Javascript
微信小程序自定义组件的实现方法及自定义组件与页面间的数据传递问题
2018/10/09 Javascript
教你搭建按需加载的Vue组件库(小结)
2019/07/29 Javascript
微信小程序HTTP请求从0到1封装
2019/09/09 Javascript
使用 Element UI Table 的 slot-scope方法
2019/10/10 Javascript
VSCode 添加自定义注释的方法(附带红色警戒经典注释风格)
2020/08/27 Javascript
Selenium执行JavaScript脚本的方法示例
2020/12/31 Javascript
Python映射拆分操作符用法实例
2015/05/19 Python
pyqt5实现按钮添加背景图片以及背景图片的切换方法
2019/06/13 Python
python匿名函数用法实例分析
2019/08/03 Python
CSS3 3D制作实战案例分析
2016/09/18 HTML / CSS
CSS3轻松实现清新 Loading 效果的简单实例
2016/06/06 HTML / CSS
J2EE面试题集锦(附答案)
2013/08/16 面试题
采购主管工作职责
2013/12/12 职场文书
大学生求职工作的自我评价
2014/02/13 职场文书
《逃家小兔》教学反思
2014/02/23 职场文书
交通事故调解协议书
2014/04/16 职场文书
《永远的白衣战士》教学反思
2014/04/25 职场文书
初中升旗仪式演讲稿
2014/05/08 职场文书
2014年医院十一国庆节活动方案
2014/09/15 职场文书
2014年转正工作总结
2014/11/08 职场文书
2014年体育教师工作总结
2014/12/03 职场文书
优秀党员申报材料
2014/12/18 职场文书
酒店工程部岗位职责
2015/02/12 职场文书
教师读书笔记
2015/06/29 职场文书
深入浅析Django MTV模式
2021/09/04 Python