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 相关文章推荐
初窥JQuery(一)jquery选择符 必备知识点
Nov 25 Javascript
推荐40款强大的 jQuery 导航插件和教程(上篇)
Sep 14 Javascript
jQuery建立一个按字母顺序排列的友好页面索引(兼容IE6/7/8)
Feb 26 Javascript
Bootstrap3 Grid system原理及应用详解
Sep 30 Javascript
浅谈jquery页面初始化的4种方式
Nov 27 Javascript
Javascript 引擎工作机制详解
Nov 30 Javascript
Angular-Ui-Router+ocLazyLoad动态加载脚本示例
Mar 02 Javascript
vue如何引用其他组件(css和js)
Apr 13 Javascript
解析Json字符串的三种方法日常常用
May 02 Javascript
jquery 回调操作实例分析【回调成功与回调失败的情况】
Sep 27 jQuery
解决vue语法会有延迟加载显现{{xxx}}的问题
Nov 14 Javascript
快速了解Vue父子组件传值以及父调子方法、子调父方法
Jul 15 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
2019年中国咖啡业现状与发展趋势
2021/03/04 咖啡文化
php堆排序实现原理与应用方法
2015/01/03 PHP
php延迟静态绑定实例分析
2015/02/08 PHP
phpStudy 2016 使用教程详解(支持PHP7)
2017/10/18 PHP
JavaScript flash复制库类 Zero Clipboard
2011/01/17 Javascript
JavaScript获取和设置CheckBox状态的简单方法
2013/07/05 Javascript
js获取当前月的第一天和最后一天的小例子
2013/11/18 Javascript
javascript中声明函数的方法及调用函数的返回值
2014/07/22 Javascript
jQuery获取checkboxlist的value值的方法
2015/09/27 Javascript
jQuery实现仿QQ在线客服效果的滚动层代码
2015/10/15 Javascript
两款JS脚本判断手机浏览器类型跳转WAP手机网站
2015/10/16 Javascript
javascript实现查找数组中最大值方法汇总
2016/02/13 Javascript
轻松掌握jQuery中wrap()与unwrap()函数的用法
2016/05/24 Javascript
bootstrap组件之导航组件使用方法
2017/01/19 Javascript
nodejs操作mongodb的增删改查功能实例
2017/11/09 NodeJs
JavaScript去掉数组重复项的方法分析【测试可用】
2018/07/19 Javascript
简单了解vue 插值表达式Mustache
2020/07/22 Javascript
Python处理RSS、ATOM模块FEEDPARSER介绍
2015/02/18 Python
python的paramiko模块实现远程控制和传输示例
2017/10/13 Python
django 使用 request 获取浏览器发送的参数示例代码
2018/06/11 Python
WxPython实现无边框界面
2019/11/18 Python
python使用openCV遍历文件夹里所有视频文件并保存成图片
2020/01/14 Python
python中time.ctime()实例用法
2021/02/03 Python
利用HTML5+CSS3实现3D转换效果实例详解
2017/05/02 HTML / CSS
如何让IE9以下版本(ie6/7/8)认识html5元素
2013/04/01 HTML / CSS
澳大利亚免息网上购物:Shop Zero
2016/09/17 全球购物
KIKO比利时官网:意大利彩妆品牌
2017/07/23 全球购物
Pretty Green美国:英式摇滚服饰风格代表品牌之一
2019/01/23 全球购物
Super-Pharm波兰:药房和香水在一个地方
2020/08/18 全球购物
父亲的菜园教学反思
2014/02/13 职场文书
高中生评语大全
2014/04/25 职场文书
会计专业自荐信范文
2015/03/05 职场文书
投标售后服务承诺书
2015/04/29 职场文书
家庭暴力离婚起诉书
2015/05/18 职场文书
2016年国陪研修感言
2015/11/18 职场文书
2019职场单身人才调研报告:互联网行业单身比例最高
2019/08/07 职场文书